.NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框

转载自:https://www.cnblogs.com/nele/p/5327380.html

  1. (function ($) {
  2. window.Ewin = function () {
  3. var html = '<div id="[Id]" class="modal fade message-dialog" role="dialog" aria-labelledby="modalLabel">' +
  4. '<div class="modal-dialog">' +
  5. '<div class="modal-content">' +
  6. '<div class="modal-header">' +
  7. '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
  8. '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
  9. '</div>' +
  10. '<div class="modal-body">' +
  11. '<p>[Message]</p>' +
  12. '</div>' +
  13. '<div class="modal-footer">' +
  14. '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' +
  15. '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' +
  16. '</div>' +
  17. '</div>' +
  18. '</div>' +
  19. '</div>';
  20.  
  21. var dialogdHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
  22. '<div class="modal-dialog">' +
  23. '<div class="modal-content">' +
  24. '<div class="modal-header">' +
  25. '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
  26. '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
  27. '</div>' +
  28. '<div class="modal-body">' +
  29. '</div>' +
  30. '</div>' +
  31. '</div>' +
  32. '</div>';
  33. var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
  34. var generateId = function () {
  35. var date = new Date();
  36. return 'mdl' + date.valueOf();
  37. }
  38. var init = function (options) {
  39. options = $.extend({}, {
  40. title: "操作提示",
  41. message: "提示内容",
  42. btnok: "确定",
  43. btncl: "取消",
  44. width: 200,
  45. auto: false
  46. }, options || {});
  47. var modalId = generateId();
  48. var content = html.replace(reg, function (node, key) {
  49. return {
  50. Id: modalId,
  51. Title: options.title,
  52. Message: options.message,
  53. BtnOk: options.btnok,
  54. BtnCancel: options.btncl
  55. }[key];
  56. });
  57. $('body').append(content);
  58. $('#' + modalId).modal({
  59. width: options.width,
  60. backdrop: 'static'
  61. });
  62. $('#' + modalId).on('hide.bs.modal', function (e) {
  63. $('body').find('#' + modalId).remove();
  64. // Modal隐藏之后父窗体无法滚动
  65. $("body").removeClass('modal-open');
  66. });
  67. return modalId;
  68. }
  69.  
  70. return {
  71. alert: function (options) {
  72. if (typeof options == 'string') {
  73. options = {
  74. message: options
  75. };
  76. }
  77. var id = init(options);
  78. var modal = $('#' + id);
  79. modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
  80. modal.find('.cancel').hide();
  81.  
  82. return {
  83. id: id,
  84. on: function (callback) {
  85. if (callback && callback instanceof Function) {
  86. modal.find('.ok').click(function () { callback(true); });
  87. }
  88. },
  89. hide: function (callback) {
  90. if (callback && callback instanceof Function) {
  91. modal.on('hide.bs.modal', function (e) {
  92. callback(e);
  93. });
  94. }
  95. }
  96. };
  97. },
  98. confirm: function (options) {
  99. var id = init(options);
  100. var modal = $('#' + id);
  101. modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
  102. modal.find('.cancel').show();
  103. return {
  104. id: id,
  105. on: function (callback) {
  106. if (callback && callback instanceof Function) {
  107. modal.find('.ok').click(function () { callback(true); });
  108. modal.find('.cancel').click(function () { callback(false); });
  109. }
  110. },
  111. hide: function (callback) {
  112. if (callback && callback instanceof Function) {
  113. modal.on('hide.bs.modal', function (e) {
  114. callback(e);
  115. });
  116. }
  117. }
  118. };
  119. },
  120. dialog: function (options) {
  121. options = $.extend({}, {
  122. title: 'title',
  123. url: '',
  124. width: 800,
  125. height: 550,
  126. onReady: function () { },
  127. onShown: function (e) { }
  128. }, options || {});
  129. var modalId = generateId();
  130.  
  131. var content = dialogdHtml.replace(reg, function (node, key) {
  132. return {
  133. Id: modalId,
  134. Title: options.title
  135. }[key];
  136. });
  137. $('body').append(content);
  138. var target = $('#' + modalId);
  139. target.find('.modal-body').load(options.url);
  140. if (options.onReady())
  141. options.onReady.call(target);
  142. target.modal();
  143. target.on('shown.bs.modal', function (e) {
  144. if (options.onReady(e))
  145. options.onReady.call(target, e);
  146. });
  147. target.on('hide.bs.modal', function (e) {
  148. $('body').find(target).remove();
  149. });
  150. }
  151. }
  152. }();
  153. })(jQuery);

使用方式:

  1. $(function () {
  2. // Ewin.alert("哈哈哈哈");
  3. Ewin.confirm({message:"确定删除"}).on(function (e) {
  4. console.log(e);
  5. });
  6. })

  

.NET MVC 学习笔记(四)— 基于Bootstarp自定义弹出框的更多相关文章

  1. Java 学习笔记 (二) Selenium WebDriver Java 弹出框

    下面这段实例实现了以下功能: 1. profile使用用户本地电脑上的 (selenium 3有问题.因为selenium 3把profile复制到一个temp文件夹里,但并不复制回去.所以每次打开仍 ...

  2. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  3. android自定义弹出框样式实现

    前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...

  4. react native仿微信性别选择-自定义弹出框

    简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...

  5. javascript基于对象的弹出框封装

    先睹为快,移动端:戳这里,打开页面后点击投票查看效果.PC端测试直接切换body的overflow属性:hidden和auto一样可以,比下面相对简化,又有人说这样偶尔不行..如果你知道优缺点欢迎给出 ...

  6. jquery实现自定义弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. bootstrap插件bootbox参数和自定义弹出框宽度设置

    插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...

  8. linux学习笔记-解决google-chrome打开后弹出输入密码以解锁您的登录密钥环的提示

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.理论知识 1.密钥的作用 google-chrome存储了网站登录时使用的账号和密码信息,这个密钥是用来保护这些信息的 2. ...

  9. jQuery 学习笔记2 点击时弹出一个对话框

    上次学习的是页面加载完成后弹出一个警告框,这里我们改为当用户点击后弹出一个警告框. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

随机推荐

  1. 上传文件 input file

    //-----前端文件------- form id="uploadForm" enctype="multipart/form-data"> <in ...

  2. window下文件在Linux下文件乱码解决

    在使用iconv转换文件的字符编码时,如果遇到类似“iconv: illegal input sequence at position”的错误,原因是需要转换的字符编码没有涵盖文件中的字符,比如,将一 ...

  3. zookeeper集群的搭建(三台相同)

    查看jdk java -version 卸载自带jdk rpm -qa|grep java rpm -e --nodeps tzdata-java-2015e-1.el6.noarch rpm -e ...

  4. Devops 到底是什么?(转)

    出处:https://www.cnblogs.com/servicehot/p/6510199.html 过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOp ...

  5. SpringBoot中用Fastjson替换默认的Jackson

    一:前言 经过测试,Jackson有很多不合人意的地方,因此建议用Fastjson来替换: 二:Jackson的坑 先定义实体类: @Data @AllArgsConstructor @NoArgsC ...

  6. 学以致用十八-----shell脚本之基础概念及变量

    1.脚本脚本,说了很多年的脚本,一直都没怎么弄明白为什么叫脚本,还仅仅是script翻译过来的?今天再查看翻译,查阅了资料,对脚本有了个新的认识. script也叫剧本,脚本---剧本,像剧本一样,让 ...

  7. 词袋模型(BOW, bag of words)

    词集模型:单词构成的集合,每个单词只出现一次. 词袋模型:把每一个单词都进行统计,同时计算每个单词出现的次数. 在train_x中,总共有6篇文档,每一行代表一个样本即一篇文档.我们的目标是将trai ...

  8. BT1120时序,可以用于自测用

    module bt1120_gen #( , , , , , )( input clk, input rst_p, // input [5:0] h_sync_pixcels, // input [5 ...

  9. cyclone IV中DDR的一个疑惑

    的生成的DDR2 IP中DDR的时钟竟然是双向的,而在arria10中生成的DDR4则是输出,而DDR2的datasheet上也指出ck和ck#是输入,不知为什么? inout mem_clk , i ...

  10. 强大的DataGrid组件[1]

    说明:DataGrid组件是Silverlight数据组件中最为常用并且是功能最为强大的数据组件.因此,对开发者而言,深入了解其特性是十分有必要的.本文先介绍该组件的基本特性,接着通过几个简单实例来说 ...