首页>>Jquery文字>>jQuery各种弹窗对话框插件(2019-08-06)

jQuery各种弹窗对话框插件

jQuery各种弹窗对话框插件
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="htmleaf-container">  
  2.   
  3.         <div class="container">  
  4.         <div class="mt20"><button id="defDialog">原始弹窗</button></div>  
  5.         <div class="mt20"><button id="defDialogWithNoPadding">原始弹窗，无padding、不设置最小宽度</button></div>  
  6.         <div class="mt20"><button id="sendSuccessToTop">发送成功的提示框（置顶）</button></div>  
  7.         <div class="mt20"><button id="sendWarningToTop">发送警告的提示框（置顶）</button></div>  
  8.         <div class="mt20"><button id="sendMsg">发送提示（自动隐藏）</button></div>  
  9.         <div class="mt20"><button id="sendMsgNoHide">发送提示（不隐藏）</button></div>  
  10.         <div class="mt20"><button id="sendSuccess">发送成功（自动隐藏）</button></div>  
  11.         <div class="mt20"><button id="sendWarning">发送警告（自动隐藏）</button></div>  
  12.         <div class="mt20"><button id="sendError">发送错误（自动隐藏）</button></div>  
  13.         <div class="mt20"><button id="confirm">确认框：标题+提示语+描述文本+确认+取消</button></div>  
  14.         <div class="mt20"><button id="confirmTitleMsgCancelConfirm">确认框：标题+提示语+居中+取消+确认</button></div>  
  15.         <div class="mt20"><button id="confirmTitleDescConfirmCancel">确认框：标题+描述文本+确认删除+取消</button></div>  
  16.         <div class="mt20"><button id="confirmMsgConfirmCancel">确认框：提示语+居中+确认+取消</button></div>  
  17.         <div class="mt20"><button id="confirmDescConfirmIcon">确认框：描述文本+Icon+确认</button></div>  
  18.         <div class="mt20"><button id="confirmDescConfirmIconSuccess">确认框：描述文本+IconSuccess+确认</button></div>  
  19.         <div class="mt20"><button id="confirmDescConfirmIconError">确认框：描述文本+IconError+确认</button></div>  
  20.         <div class="mt20"><button id="confirmDescConfirmIconWarning">确认框：描述文本+IconWarning+确认</button></div>  
  21.         <div class="mt20"><button id="confirmTitleMsgAutoClose">确认框：标题+提示语+居中+隐藏关闭+设置宽度，自动3s隐藏</button></div>  
  22.         <div class="mt20"><button id="confirmWithCustom">确认框：自定义内容格式，阻止onConfrim的执行</button></div>  
  23.         <div class="mt20"><button id="confirmCustomButton">确认框：自定义button属性</button></div>  
  24.         </div>  
  25.           
  26.     </div>  

 

JavaScript Code
  1. $('#defDialog').click(function() {  
  2.      var content = '<div class="customClass">' + '原始弹窗-内容，需要自定义该模块的样式！' + '<div>' + '<button class="j_dialogConfirm">确认</button>' + ' <button class="j_dialogCancel">取消</button>' + '</div>' + '</div>';  
  3.      $.dialog({  
  4.        id: 'customId',  
  5.        title: '原始弹窗-标题',  
  6.        hideHeader: false,  
  7.        hideClose: false,  
  8.        content: content,  
  9.        onConfirm: function() {  
  10.          $.sendMsg('点击确定！');  
  11.        },  
  12.        onCancel: function() {  
  13.          $.sendMsg('点击取消！');  
  14.        },  
  15.        onClose: function() {  
  16.          $.sendMsg('点击关闭！');  
  17.        }  
  18.      });  
  19.    });  

 


原文地址:http://www.freejs.net/article_jquerywenzi_807.html