封装JQuery Dialog实现Dialog、Tip、alert和confirm

继续回馈ITEYE， 绝对原创，封装JQuery Dialog实现Dialog、Tip、类似alert和confirm的MessageBox，项目使用中，如有bug请指正。

Dialog可以显示定义好的Div，也可以传入网址url，一般我们用于显示网页传入url，因为如果是显示本页div的话就没必要调用该函数，直接$('#divName').dialog('open')....就行了。

style效果引用了JQuery CSS，体现为方法的uiState参数，具体可参考jquery-ui-1.8.23.custom.css文件中定义的样式。

dialog中图标自定义用到的样式：

<style type="text/css">
      body
      { font-size: 9pt; font-family: "Microsoft YaHei", 微软雅黑; color: #000000; margin: 20px;  }
      .ImageLoading { background-image: url('css/images/Loading.gif'); background-repeat: no-repeat; background-color: Transparent; width: 26px; height: 16px; border-style: none; }
      .ImageLoadingText { background-image: url('css/images/loading_text.gif'); background-repeat: no-repeat; background-color: Transparent; width: 39px; height: 5px; border-style: none; }
      ul { margin: 0px; padding: 0px; list-style-type: none; }
      li { float: left; }

      /* JQuery对话框 */
      .DialogIcon        { display: block; width: 29px; height: 31px; overflow: hidden; background-image: url('css/images/WSC_DialogIcon.png'); background-repeat: no-repeat; text-indent: -99999px; }
      .DialogIconInfo    { background-position: 0px 0px; }
      .DialogIconWarning { background-position: -24px 0px; }
      .DialogIconError   { background-position: -48px 0px; }
      .DialogIconQuestion{ display: block; width: 29px; height: 31px; overflow: hidden; background-image: url('css/images/delete.png'); background-repeat: no-repeat; text-indent: -99999px; }
      .contentSectionWhite { border: 1px solid #CCCCCC; background-color: white;  border-radius: 4px; padding:10px; margin: 0px 0 10px; -moz-box-shadow:0 0 10px #C4C4C4; -webkit-box-shadow:0 0 10px #C4C4C4; box-shadow:0 0 10px #C4C4C4; }

    </style>

特别提示，JS运行是和代码中引用顺序有关的，一定要在实际调用前引用JQuery库。

运行前提：
引用JQuery的JS库和CSS文件，不是一定要用下面涉及到的版本，这只是我用到的版本：
jquery-1.8.1.min.js
jquery-ui-1.8.23.custom.min.js
jquery-ui-1.8.23.custom.css


效果如附件



调用示列：
Tip调用：
//第一个参数是对象，所以此处需要传入document.getElementById('xx')
<input name="GridViewPager:btnPageF" id="GridViewPager_btnPageF" onmouseover="WSC_ShowPersistentTip(document.getElementById('GridViewPager_btnPageF'), '首页', 'x', 100, 'ui-state-active', 'Bottom');" onmouseout="WSC_HidePersistentTip();" src="PagerImages/nv_First2.gif" border="0" type="image">

Dialog调用：
// 初始化
      $(function () {
         // 新增

         $("#btnAdd").click(function () {
            WSC_ShowDialog("WSC_UserEdit.aspx?ACTION=NEW&LOGIN_NAME=", 810, 300, "新增用户");
            return false;
         });

         // 编辑

         $(".JQueryDialog").click(function () {
            WSC_ShowDialog("WSC_UserEdit.aspx?ACTION=EDIT&LOGIN_NAME=" + escape($(this).attr("title")), 810, 300, "编辑用户");
            return false;
         });
      });
   </script>



=========================================================
JS代码：

// 提示框
var WSC_ShowTip = function (sender, message, icon, duration, uiState) {
   /// <summary>
   /// 显示提示
   /// </summary>
   if (typeof (sender) != "object") {
      return;
   }
   if (!icon) {
      icon = "info";
   }
   if (!duration) {
      duration = 200;
   }
   if (!uiState)
      uiState = "ui-state-active";

   //容器
   var id = "WSC_Tip";
   var container = $("#" + id);
   if (container.size() == 0) { //不存在则创建
      container = $("<div id='WSC_JQueryDialogAutoGenTipDiv' class='" + uiState + " ui-corner-all ui-helper-hidden' style='padding: 5px; position: absolute; z-index:999999;'></div>")
            .attr("id", id)
            .append("<span style='float: left; margin: 2px 0px 0px 0px;'></span>")      //图标容器
            .append("<span style='display: block; margin: 2px 0px 2px 20px;'></span>")  //消息容器
            .appendTo($(document.body));
   }

   //图标
   container.children("span:first")
        .removeClass()
        .addClass("ui-icon").addClass("ui-icon-" + icon);

   //消息
   container.children("span:last").html(message);

   //呈现位置
   var senderPosition = $(sender).position();

   container
        .stop(true, true) //初始化动画
        .css("left", senderPosition.left + $(sender).outerWidth() + 2).css("top", senderPosition.top) //位置
        .fadeIn() //显示
   //.delay(duration)
        .fadeOut(duration); //隐藏
};

var persistentTipContainer;

// 显示持久提示信息
var WSC_ShowPersistentTip = function (sender, message, icon, duration, uiState, pos) {
   //persistentTipContainer = null;

   if (typeof (sender) != "object") {
      return;
   }

   if (!icon) {
      icon = "info";
   }

   if (!duration) {
      duration = 50;
   }

   if (!uiState)
      uiState = "ui-state-active";

   if (!pos)
      pos = "right";
   pos = pos.toLowerCase();
   if (pos != "left" && pos != "right" && pos != "top" && pos != "bottom")
      pos = "right";

   //容器
   var id = "WSC_Tip";
   persistentTipContainer = $("#" + id);
   if (persistentTipContainer.size() == 0) { //不存在则创建
      persistentTipContainer = $("<div id='WSC_JQueryDialogAutoGenTipDiv' class='" + uiState + " ui-corner-all ui-helper-hidden' style='padding: 5px; position: absolute; z-index:999999;'></div>")
            .attr("id", id)
            .append("<span style='float: left; margin: 2px 0px 0px 0px;'></span>")      //图标容器
            .append("<span style='display: block; margin: 2px 0px 2px 20px;'></span>")  //消息容器
            .appendTo($(document.body));
   }

   //样式
   persistentTipContainer.removeClass()
      .addClass(uiState).addClass("ui-corner-all").addClass("ui-helper-hidden");

   //图标
   persistentTipContainer.children("span:first")
        .removeClass()
        .addClass("ui-icon").addClass("ui-icon-" + icon);

   //消息
   persistentTipContainer.children("span:last").html(message);

   //呈现位置
   var senderPosition = $(sender).position();
   var left = 0, top = 0;
   if (pos == "right") {
      left = senderPosition.left + $(sender).outerWidth() + 2;
      top = senderPosition.top;
   }
   else if (pos == "left") {
      left = senderPosition.left - persistentTipContainer.outerWidth() - 2;
      top = senderPosition.top;
   }
   else if (pos == "top") {
      left = senderPosition.left;
      top = senderPosition.top - $(sender).outerHeight() - 2;
   }
   else if (pos == "bottom") {
      left = senderPosition.left;
      top = senderPosition.top + $(sender).outerHeight() + 2;
   }

   persistentTipContainer
        .stop(true, true) //初始化动画
        .css("left", left).css("top", top) //位置
        .fadeIn(duration) //显示
        .delay('slow');
};

// 隐藏持久提示信息
var WSC_HidePersistentTip = function () {
   persistentTipContainer
   //.delay(10)
      .hide();
   //.fadeOut("slow"); //隐藏
};

// 消息框
WSC_ShowMessage = function (message, title, icon) {
   /// <summary>
   /// 显示消息
   /// </summary>
   if (!title) {
      title = WSC_SystemName;
   }
   if (!icon) {
      icon = "Info";
   }
   //容器
   var id = "WSC_Message";
   var container = $("#" + id);
   if (container.size() == 0) { //不存在则创建
      container = $("<div id='WSC_JQueryDialogAutoGenMessageDiv' class='ui-helper-hidden' style='margin:16px 0px 0px 2px; z-index:999999;'></div>").attr("id", id)
            .append("<span style='float: left; width: 24px; height: 24px;'></span>")    //图标容器
            .append("<span style='display: block; margin: 2px 0px 0px 36px;'></span>")  //消息容器
            .appendTo($(document.body))
            .dialog({
               autoOpen: false,
               modal: true,
               buttons: [
                    {
                       text: "OK",
                       click: function () { $(this).dialog("close"); }
                    }
                ],
               minWidth: 320,
               minHeight: 160,
               show: "fade",
               hide: "fade"
            });
   }
   //标题
   container.dialog("option", "title", title);
   //图标
   container.children("span:first")
        .removeClass()
        .addClass("DialogIcon").addClass("DialogIcon" + icon);
   //消息
   container.children("span:last").html(message);
   //呈现
   container.dialog("open");
};


// 确认框
var dialogConfirmed = false;

ShowConfirmationDialog = function ConfirmDialog(obj, title, message, icon) {
   if (!title)
      title = "确认";

   if (!icon) {
      icon = "Info";
   }
   if (!message)
      message = "确认吗？";

   if (!dialogConfirmed) {
      var div = "<div id='WSC_JQueryDialogAutoGenConfirmationDiv' style='margin:16px 0px 0px 2px; z-index:999999;' title='" + title + "'>";
      div = div + "<span style='float: left; width: 24px; height: 24px;' class='DialogIcon DialogIcon" + icon + "'></span>";    //图标容器
      div = div + "<span style='display: block; margin: 2px 0px 0px 36px;'>" + message + "</span>";   //消息容器
      div = div + "</div>";

      //$('body').append("<div id='WSC_DialogConfirmation' title='" + title + "'>" + message + "
</div>");
      $('body').append(div);

      $('#WSC_JQueryDialogAutoGenConfirmationDiv').dialog({
         autoOpen: false,
         minWidth: 320,
         minHeight: 160,
         modal: true,
         title: title,
         overlay: { opacity: 0.5, background: "black", overflow: "auto" },
         show: "fade",
         hide: "fade",
         close: function (event, ui) { $('body').find('#WSC_JQueryDialogAutoGenConfirmationDiv').remove(); },
         buttons:
                    {
                       'Yes': function () {
                          $(this).dialog('close');
                          dialogConfirmed = true;
                          if (obj) obj.click();
                       },
                       'No': function () {
                          $(this).dialog('close');
                       }
                    }
      });

      $('#WSC_JQueryDialogAutoGenConfirmationDiv').dialog("open");
   }

   return dialogConfirmed;
}

var WSC_SystemName = "WSC";

// 对话框
WSC_ShowDialog = function (url, width, height, title) {
   if (!title) {
      title = WSC_SystemName;
   }

   //容器
   var id = "WSC_Dialog";
   var container = $("#" + id);
   if (container.size() == 0) { //不存在则创建

      var loadingDiv = "<div id='WSC_JQueryDialogLoading' class='contentSectionWhite' style='display: block; background-color:White; width:92px; height:20px; margin: 120px auto auto 40%; position:absolute;'>";
      loadingDiv = loadingDiv + "

<li class='ImageLoading' style=' width:30px;'></li><li class='ImageLoadingText' style='margin: 8px 0px 0px 2px; width:60px;'></li>

</div>";

      container = $("<div id='WSC_JQueryDialogAutoGenDiv' class='ui-helper-hidden' style='z-index:999990;'>" + loadingDiv + "</div>").attr("id", id)
            .append("<iframe frameborder='0' style='width: 100%; height: 100%;'></iframe>") //内容容器
            .appendTo($(document.body))
            .dialog({
               autoOpen: false,
               modal: true,
               minWidth: 320,
               minHeight: 220,
               show: "fade",
               hide: "blind",
               open: function (event, ui) {
                  DelayToShowLoading();
               },
               close: function (event, ui) {
                  $(this).children("iframe:first").removeAttr("src"); //清除内容
               }
            });
   }

   $("#WSC_JQueryDialogLoading").css("display", "block");

   //标题
   container.dialog("option", "title", title);
   //尺寸
   container.dialog("option", "width", width).dialog("option", "height", height);
   //内容
   container.children("iframe:first").attr("src", url);
   //呈现
   container.dialog("open");
};

var count = 0;
function DelayToShowLoading() {
  
   count++;
   if (count > 2) {
      $("#WSC_JQueryDialogLoading").css("display", "none");
      count = 0;
      return true;
   }
   window.setTimeout("DelayToShowLoading()", 800);

}

评论

1 楼 shoushounihao 2013-01-14  

弹出增加用户，保存时如何让弹出框架消失，数据也提交对应action。谢谢。能不能放一份更好动态做案例。谢谢