用jQuery UI/Dialog替换javascript警报

如何更改我正在使用的javascript警报以使用jQuery UI/对话框。我一直试图将脚本改为使用对话框，但没有成功。我想使用比alert更好的工具为我的日历创建弹出窗口。所以我在考虑一个对话，但如果有更好的，我也会感兴趣

这是我的完整日历代码

$(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（“从

签名中选择*
pid
=“$pid”和
done
=0”）作为$row）{

echo json_编码（$events）

注意：我使用jqAlert（）作为函数名，jqAlert（）不是真正的模态函数，就像JS alert（）函数是模态函数一样。按照您问题中示例代码的设置方式，您不需要真正的模态对话框，但如果这是一个不成文的期望，我也不会感到惊讶

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");
            }
        }
    });
}

函数jqAlert（msg）{
console.log（“警报：+msg”）；
$（“”+msg+”）。对话框({
莫代尔：是的，
宽度：400，
身高：222，
展示：{
效果：“盲”，
持续时间：444
},
隐藏：{
效果：“爆炸”，
持续时间：333
},
按钮：{
Ok：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
}
我编写了一个小型库来简化这个过程


它很简单，但可以定制。
我会使用qtip，fullcalendar提供了如何使用的详细说明

安装（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(); 
         } 

      }); 

   }); 

我将代码改成这样，但它无法正常工作。我将数据粘贴在日历顶部，它只显示了三个数据中的一个，并且无法单击。因此，我从FullCalendar文档中提取了示例，它也做了同样的事情。在qTip文档中，它说他们推荐jQuery 1.3.2。你认为这与我们有什么关系吗我正在使用jquery-1.11.0，可能就是这样。尝试安装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(); 
         } 

      }); 

   });