.NET MVC 学习笔记(四)— 基于Bootstarp自定义弹出框
.NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框
转载自:https://www.cnblogs.com/nele/p/5327380.html
- (function ($) {
- window.Ewin = function () {
- var html = '<div id="[Id]" class="modal fade message-dialog" role="dialog" aria-labelledby="modalLabel">' +
- '<div class="modal-dialog">' +
- '<div class="modal-content">' +
- '<div class="modal-header">' +
- '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
- '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
- '</div>' +
- '<div class="modal-body">' +
- '<p>[Message]</p>' +
- '</div>' +
- '<div class="modal-footer">' +
- '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' +
- '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' +
- '</div>' +
- '</div>' +
- '</div>' +
- '</div>';
- var dialogdHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
- '<div class="modal-dialog">' +
- '<div class="modal-content">' +
- '<div class="modal-header">' +
- '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
- '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
- '</div>' +
- '<div class="modal-body">' +
- '</div>' +
- '</div>' +
- '</div>' +
- '</div>';
- var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
- var generateId = function () {
- var date = new Date();
- return 'mdl' + date.valueOf();
- }
- var init = function (options) {
- options = $.extend({}, {
- title: "操作提示",
- message: "提示内容",
- btnok: "确定",
- btncl: "取消",
- width: 200,
- auto: false
- }, options || {});
- var modalId = generateId();
- var content = html.replace(reg, function (node, key) {
- return {
- Id: modalId,
- Title: options.title,
- Message: options.message,
- BtnOk: options.btnok,
- BtnCancel: options.btncl
- }[key];
- });
- $('body').append(content);
- $('#' + modalId).modal({
- width: options.width,
- backdrop: 'static'
- });
- $('#' + modalId).on('hide.bs.modal', function (e) {
- $('body').find('#' + modalId).remove();
- // Modal隐藏之后父窗体无法滚动
- $("body").removeClass('modal-open');
- });
- return modalId;
- }
- return {
- alert: function (options) {
- if (typeof options == 'string') {
- options = {
- message: options
- };
- }
- var id = init(options);
- var modal = $('#' + id);
- modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
- modal.find('.cancel').hide();
- return {
- id: id,
- on: function (callback) {
- if (callback && callback instanceof Function) {
- modal.find('.ok').click(function () { callback(true); });
- }
- },
- hide: function (callback) {
- if (callback && callback instanceof Function) {
- modal.on('hide.bs.modal', function (e) {
- callback(e);
- });
- }
- }
- };
- },
- confirm: function (options) {
- var id = init(options);
- var modal = $('#' + id);
- modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
- modal.find('.cancel').show();
- return {
- id: id,
- on: function (callback) {
- if (callback && callback instanceof Function) {
- modal.find('.ok').click(function () { callback(true); });
- modal.find('.cancel').click(function () { callback(false); });
- }
- },
- hide: function (callback) {
- if (callback && callback instanceof Function) {
- modal.on('hide.bs.modal', function (e) {
- callback(e);
- });
- }
- }
- };
- },
- dialog: function (options) {
- options = $.extend({}, {
- title: 'title',
- url: '',
- width: 800,
- height: 550,
- onReady: function () { },
- onShown: function (e) { }
- }, options || {});
- var modalId = generateId();
- var content = dialogdHtml.replace(reg, function (node, key) {
- return {
- Id: modalId,
- Title: options.title
- }[key];
- });
- $('body').append(content);
- var target = $('#' + modalId);
- target.find('.modal-body').load(options.url);
- if (options.onReady())
- options.onReady.call(target);
- target.modal();
- target.on('shown.bs.modal', function (e) {
- if (options.onReady(e))
- options.onReady.call(target, e);
- });
- target.on('hide.bs.modal', function (e) {
- $('body').find(target).remove();
- });
- }
- }
- }();
- })(jQuery);
使用方式:
- $(function () {
- // Ewin.alert("哈哈哈哈");
- Ewin.confirm({message:"确定删除"}).on(function (e) {
- console.log(e);
- });
- })
.NET MVC 学习笔记(四)— 基于Bootstarp自定义弹出框的更多相关文章
- Java 学习笔记 (二) Selenium WebDriver Java 弹出框
下面这段实例实现了以下功能: 1. profile使用用户本地电脑上的 (selenium 3有问题.因为selenium 3把profile复制到一个temp文件夹里,但并不复制回去.所以每次打开仍 ...
- js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
- android自定义弹出框样式实现
前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...
- react native仿微信性别选择-自定义弹出框
简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...
- javascript基于对象的弹出框封装
先睹为快,移动端:戳这里,打开页面后点击投票查看效果.PC端测试直接切换body的overflow属性:hidden和auto一样可以,比下面相对简化,又有人说这样偶尔不行..如果你知道优缺点欢迎给出 ...
- jquery实现自定义弹出框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
- linux学习笔记-解决google-chrome打开后弹出输入密码以解锁您的登录密钥环的提示
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.理论知识 1.密钥的作用 google-chrome存储了网站登录时使用的账号和密码信息,这个密钥是用来保护这些信息的 2. ...
- jQuery 学习笔记2 点击时弹出一个对话框
上次学习的是页面加载完成后弹出一个警告框,这里我们改为当用户点击后弹出一个警告框. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
随机推荐
- 上传文件 input file
//-----前端文件------- form id="uploadForm" enctype="multipart/form-data"> <in ...
- window下文件在Linux下文件乱码解决
在使用iconv转换文件的字符编码时,如果遇到类似“iconv: illegal input sequence at position”的错误,原因是需要转换的字符编码没有涵盖文件中的字符,比如,将一 ...
- zookeeper集群的搭建(三台相同)
查看jdk java -version 卸载自带jdk rpm -qa|grep java rpm -e --nodeps tzdata-java-2015e-1.el6.noarch rpm -e ...
- Devops 到底是什么?(转)
出处:https://www.cnblogs.com/servicehot/p/6510199.html 过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOp ...
- SpringBoot中用Fastjson替换默认的Jackson
一:前言 经过测试,Jackson有很多不合人意的地方,因此建议用Fastjson来替换: 二:Jackson的坑 先定义实体类: @Data @AllArgsConstructor @NoArgsC ...
- 学以致用十八-----shell脚本之基础概念及变量
1.脚本脚本,说了很多年的脚本,一直都没怎么弄明白为什么叫脚本,还仅仅是script翻译过来的?今天再查看翻译,查阅了资料,对脚本有了个新的认识. script也叫剧本,脚本---剧本,像剧本一样,让 ...
- 词袋模型(BOW, bag of words)
词集模型:单词构成的集合,每个单词只出现一次. 词袋模型:把每一个单词都进行统计,同时计算每个单词出现的次数. 在train_x中,总共有6篇文档,每一行代表一个样本即一篇文档.我们的目标是将trai ...
- BT1120时序,可以用于自测用
module bt1120_gen #( , , , , , )( input clk, input rst_p, // input [5:0] h_sync_pixcels, // input [5 ...
- cyclone IV中DDR的一个疑惑
的生成的DDR2 IP中DDR的时钟竟然是双向的,而在arria10中生成的DDR4则是输出,而DDR2的datasheet上也指出ck和ck#是输入,不知为什么? inout mem_clk , i ...
- 强大的DataGrid组件[1]
说明:DataGrid组件是Silverlight数据组件中最为常用并且是功能最为强大的数据组件.因此,对开发者而言,深入了解其特性是十分有必要的.本文先介绍该组件的基本特性,接着通过几个简单实例来说 ...