用JQuery UI dialog实现Alert和Confirm功能

          JQuery UI dialog 虽然可以实现 Alert Confirm 功能,但每次都要定义相关 dialog 内容是比较麻烦的。如果只需要简单的调用 ShowMsg 内容 )这样就会省上很多事情,其实只要在 JQuery UI dialog 的基础上做些简单的工作就可以了。

把功能封装到一个用户控件中,有需要直接引用就可以了。

<%@ Control Language="C#" AutoEventWireup="true" %>

                   <div id="AlertMessage" title="信息确认">

                    <p id="AlertMessageBody"  class="msgbody">p>

                   div>

                   <div id="ConfirmMessage" title="信息提问">

                   <p id="ConfirmMessageBody" class="msgbody"">p>

                   div>

                            <script>

                       $(document).ready(function() {

                           $('#AlertMessage').dialog({

                               autoOpen: false,

                               width: 300,

                               modal: true,

                               buttons: {

                                   "取消": function() {

                                       $(this).dialog("close");

                                   }

                               }

                           });

                           $('#ConfirmMessage').dialog({

                               autoOpen: false,

                               width: 300,

                               modal: true,

                               buttons: {

                                   "取消": function() {

                                       $(this).dialog('close');

                                       mDialogCallback(false);

                                   },

                                   "确定": function() {

                                        $(this).dialog('close');

                                       mDialogCallback(true);

                                   }

                               }

                           });

                       });

                       var mDialogCallback;

                       function ShowMsg(msg, callback) {

                           if (callback == null) {

                               $('#AlertMessageBody').html(msg);

                               $('#AlertMessage').dialog('open');

                           }

                           else {

                               mDialogCallback = callback;

                               $('#ConfirmMessageBody').html(msg);

                               $('#ConfirmMessage').dialog('open');

                           }

                       };

                   script>

 

这样以后使用起来就省些事了:

ShowMsg('是否提交活动信息?', function(yes) {

                if (yes) {

                   

                }

            });

 

你可能感兴趣的:(用JQuery UI dialog实现Alert和Confirm功能)