Este artículo es un artículo espejo de traducción automática, por favor haga clic aquí para saltar al artículo original.

Architect_Programmer_Code Red Agrícola»Arquitecto › Diseño front-end y web › Bastidor frontal › jquery reescribe la ventana de alerta/confirmación al estilo bootstrap ...
Vista: 12972|Respuesta: 0

[Jquery] jquery anula la ventana de mensajes de alerta/confirmación estilo bootstrap

[Copiar enlace]
Publicado en 5/11/2015 16:30:50 | | | |
Creo que mucha gente está harta de la aparición de alertas y confirmaciones, y recientemente ha estado trabajando en un proyecto usando bootstrap, y por cierto, han encapsulado un cuadro de mensajes al estilo bootstrap.

Es muy sencillo de implementar, el propio bootstrap viene con una caja modal modal, que queda bastante bien :) simplemente encapsularlo y úsalo.

Sin código, sin verdad, menos palabras y más acción, y codificando.


El proyecto es Asp.net arquitectura MVC para facilitar la llamada global, añado directamente el siguiente HTML a la página de diseño global:

  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 -->
Copiar código


No hay mucho que decir, todo son estilos modales bootstrap, amigos que no lo conozcan pueden mirar bootstrap css, corchetes [....] El contenido será eventualmente reemplazado por la visualización de parámetros que aprobamos.

El paquete de js es así:
  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. });
Copiar código
  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.   });
Copiar código

Representaciones:

También hay algunos detalles que necesitan mejorar, como blockUI, etc.; si es tarde, vete a la cama primero.

Cubre cuando tengas tiempo.


Enlace original: http://www.tuicool.com/articles/mMNrIr





Anterior:Uso de onclick y href en la etiqueta A en HTML
Próximo:Preguntas en .NET C# sobre la toma de valores de carga útil de solicitud en segundo plano

Publicaciones relacionadas
Renuncia:
Todo el software, materiales de programación o artículos publicados por Code Farmer Network son únicamente para fines de aprendizaje e investigación; El contenido anterior no se utilizará con fines comerciales o ilegales; de lo contrario, los usuarios asumirán todas las consecuencias. La información de este sitio proviene de Internet, y las disputas de derechos de autor no tienen nada que ver con este sitio. Debes eliminar completamente el contenido anterior de tu ordenador en un plazo de 24 horas desde la descarga. Si te gusta el programa, por favor apoya el software genuino, compra el registro y obtén mejores servicios genuinos. Si hay alguna infracción, por favor contáctanos por correo electrónico.
Mail To:help@itsvse.com