This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Front-end frame › jquery rewrites bootstrap style alert/confirm message window ...
View: 12972|Reply: 0

[Jquery] jquery overrides the bootstrap-style alert/confirm message window

[Copy link]
Posted on 11/5/2015 4:30:50 PM | | | |
I believe many people are fed up with the appearance of alerts and confirms, and have recently been working on a project using bootstrap, and by the way, they have encapsulated a bootstrap-style message box.

It's very simple to implement, bootstrap itself comes with a modal modal box, which looks pretty good:) just encapsulate it and use it.

No code, no truth, less talk and more do, and code up.


The project is Asp.net MVC architecture for easy global calling, I directly add the following HTML to the global layout page:

  1. <!-- system modal start -->
  2.     <div id="ycf-alert" class="modal">
  3.       <div class="modal-dialog modal-sm">
  4.         <div class="modal-content">
  5.           <div class="modal-header">
  6.             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  7.             <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
  8.           </div>
  9.           <div class="modal-body small">
  10.             <p>[Message]</p>
  11.           </div>
  12.           <div class="modal-footer" >
  13.             <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
  14.             <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
  15.           </div>
  16.         </div>
  17.       </div>
  18.     </div>
  19.   <!-- system modal end -->
Copy code


Not much to say, it's all bootstrap modal styles, friends who are not familiar with it can check bootstrap css, brackets [....] The content will eventually be replaced with the parameter display we passed.

The js package looks like this:
  1. $(function () {
  2.   window.Modal = function () {
  3.     var reg = new RegExp("\[([^\[\]]*?)\]", 'igm');
  4.     var alr = $("#ycf-alert");
  5.     var ahtml = alr.html();

  7.     //关闭时恢复 modal html 原样，供下次调用时 replace 用
  8.     //var _init = function () {
  9.     //        alr.on("hidden.bs.modal", function (e) {
  10.     //                $(this).html(ahtml);
  11.     //        });
  12.     //}();

  14.     /* html 复原不在 _init() 里面做了，重复调用时会有问题，直接在 _alert/_confirm 里面做 */


  17.     var _alert = function (options) {
  18.       alr.html(ahtml);        // 复原
  19.       alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
  20.       alr.find('.cancel').hide();
  21.       _dialog(options);

  23.       return {
  24.         on: function (callback) {
  25.           if (callback && callback instanceof Function) {
  26.             alr.find('.ok').click(function () { callback(true) });
  27.           }
  28.         }
  29.       };
  30.     };

  32.     var _confirm = function (options) {
  33.       alr.html(ahtml); // 复原
  34.       alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
  35.       alr.find('.cancel').show();
  36.       _dialog(options);

  38.       return {
  39.         on: function (callback) {
  40.           if (callback && callback instanceof Function) {
  41.             alr.find('.ok').click(function () { callback(true) });
  42.             alr.find('.cancel').click(function () { callback(false) });
  43.           }
  44.         }
  45.       };
  46.     };

  48.     var _dialog = function (options) {
  49.       var ops = {
  50.         msg: "提示内容",
  51.         title: "操作提示",
  52.         btnok: "确定",
  53.         btncl: "取消"
  54.       };

  56.       $.extend(ops, options);

  58.       console.log(alr);

  60.       var html = alr.html().replace(reg, function (node, key) {
  61.         return {
  62.           Title: ops.title,
  63.           Message: ops.msg,
  64.           BtnOk: ops.btnok,
  65.           BtnCancel: ops.btncl
  66.         }[key];
  67.       });
  68.       
  69.       alr.html(html);
  70.       alr.modal({
  71.         width: 500,
  72.         backdrop: 'static'
  73.       });
  74.     }

  76.     return {
  77.       alert: _alert,
  78.       confirm: _confirm
  79.     }

  81.   }();
  82. });
Copy code
  1. // 四个选项都是可选参数
  2. Modal.alert(
  3.   {
  4.     msg: '内容',
  5.     title: '标题',
  6.     btnok: '确定',
  7.     btncl:'取消'
  8.   });

  10. // 如需增加回调函数，后面直接加 .on( function(e){} );
  11. // 点击“确定” e: true
  12. // 点击“取消” e: false
  13. Modal.confirm(
  14.   {
  15.     msg: "是否删除角色？"
  16.   })
  17.   .on( function (e) {
  18.     alert("返回结果：" + e);
  19.   });
Copy code

Renderings:

There are also some details that need to be improved, such as blockUI, etc., if it's late, go to bed first.

Fill in when you have time.


Original link: http://www.tuicool.com/articles/mMNrIr





Previous:Use of onclick and href in the A tag in HTML
Next:.NET C# questions about Request payload taking values in the background

Related Posts
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com