用jQuery UI /对话框替换JavaScript警报

Question

我如何更改使用的javascript警报以使用jQuery UI/对话框。我一直在尝试更改脚本以使用对话框而没有成功。我想使用比警报更好的东西为我的日历创建弹出窗口。因此，我在想对话，但是如果有更好的事情，我也会感兴趣。

这是我的FullCalendar代码

$(document).ready(function() { 
     $('#calendar').fullCalendar({ 
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
             eventClick: function(calEvent, jsEvent, view) {
        alert('Name:  ' + calEvent.title + 'n' + "Start Date/Time: " +  $.fullCalendar.formatDate(calEvent.start, 'dd-MM-yyyy hh:mm:ss TT') + 'n' + 'End Date/Time:  ' + $.fullCalendar.formatDate(calEvent.end, 'dd-MM-yyyy hh:mm:ss TT') + 'n' +  'Address:  ' + calEvent.address1 +  'n' + 'Apt/Suite:  ' + calEvent.address2 + 'n' + 'City/Sate/Zip:  ' + calEvent.city + ' ' + calEvent.state + ' ' + calEvent.zip + 'n' + 'Home Phone:  ' + calEvent.hphone + 'n' + 'Cell Phone:   ' + calEvent.cphone + 'n' + 'Work Phone:  ' + calEvent.wphone + 'n' + 'Email:  ' + calEvent.email + 'n' + 'Order Number:   ' + calEvent.ordern);
            },
         events: "json_events.php", 

         loading: function(bool) { 
            if (bool) $('#loading').show(); 
            else $('#loading').hide(); 
         } 
      }); 
   }); 

这就是我将JSON代码发送到日历的方式

$ events = array（）;foreach（$ db-> query（"从 signings选择 * pid ='$ pid'和 done = 0"）as $ row）{

$title = $row['fname']." ".$row['lname'];
$eventsArray['id'] =  $row['id'];
$eventsArray['ordern'] =  $row['ordern'];
$eventsArray['title'] = $title;
//$eventsArray['url'] = "eventinfo.php?id=$id";
$eventsArray['start'] = $row['signstart'];
$eventsArray['end'] = $row['signend'];
$eventsArray['address1'] = $row['street1'];
$eventsArray['address2'] = $row['street2'];
$eventsArray['city'] = $row['city'];
$eventsArray['state'] = $row['state'];
$eventsArray['zip'] = $row['zip'];
$eventsArray['hphone'] = $row['hphone'];
$eventsArray['cphone'] = $row['cphone'];
$eventsArray['wphone'] = $row['wphone'];
$eventsArray['email'] = $row['email'];
$eventsArray['allDay'] = "";
$eventsArray['color'] = "#7B1616";
$eventsArray['textColor'] = "#FFFFFF";
$events[] = $eventsArray; }

echo json_encode（$ events）;

Answer 1

警告：我将jqalert（）用作函数名称，而jqalert（）并非以相同的方式真正模态。示例代码在您的问题中设置的方式，您不需要真正的模态对话框，但是如果这是一个不成文的期望，我不会感到惊讶。

function jqAlert(msg) {
    console.log("Alert: " + msg);
    $('<div id="sfUI-Dialog-Alert" title="Message from Web Application" style="font-size: 0.8em"><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + msg + '</div>').dialog({
        modal: true,
        width: 400,
        height: 222,
        show: {
            effect: "blind",
            duration: 444
        },
        hide: {
            effect: "explode",
            duration: 333
        },
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
}

Answer 2

我写了一个小库来简单。

https://github.com/scimonster/jquery-ui-alert

这很简单，但可以自定义。

Answer 3

我将使用qtip fullcalendar具有如何使用的示例。

安装QTIP2（不再积极开发QTIP）后，您的代码会看起来以下内容：

$(document).ready(function() { 
     $('#calendar').fullCalendar({ 
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
             eventClick: function(calEvent, jsEvent, view) {
        alert('Name:  ' + calEvent.title + 'n' + "Start Date/Time: " +  $.fullCalendar.formatDate(calEvent.start, 'dd-MM-yyyy hh:mm:ss TT') + 'n' + 'End Date/Time:  ' + $.fullCalendar.formatDate(calEvent.end, 'dd-MM-yyyy hh:mm:ss TT') + 'n' +  'Address:  ' + calEvent.address1 +  'n' + 'Apt/Suite:  ' + calEvent.address2 + 'n' + 'City/Sate/Zip:  ' + calEvent.city + ' ' + calEvent.state + ' ' + calEvent.zip + 'n' + 'Home Phone:  ' + calEvent.hphone + 'n' + 'Cell Phone:   ' + calEvent.cphone + 'n' + 'Work Phone:  ' + calEvent.wphone + 'n' + 'Email:  ' + calEvent.email + 'n' + 'Order Number:   ' + calEvent.ordern);
            },
         events: "json_events.php", 
         //New code here:
         eventRender: function(event, element) {
            element.qtip({
               content: event.description
            });
         },
         loading: function(bool) { 
            if (bool) $('#loading').show(); 
            else $('#loading').hide(); 
         } 
      }); 
   });