扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框_a-button 动态弹出modal form-程序员宅基地

技术标签: JavaScript  bootstrap  modal  

js代码

function initView(_box){
	var $p = $(_box || document);
	
	$('a[target="dialog"]', $p).each(function(event){
		$(this, $p).unbind('click').click(function(event){
			openModal(event);
		});
	});
}
$(function(){
	initView();
});

/**关闭modal*/
function hideModal(obj){
	var modal = $(obj).parents("div.modal");
	if(modal.length > 0){
		modal.remove();
		initView();
	}
}
/**打开modal*/
function openModal(event){
//	var this = $(this);
	var $this = $(event.currentTarget);
	var _url = $this.attr("href");
	var _title = $this.attr("title");
	var _id;
	
	_id = dialog.content();
	
	var options = {
			backdrop: false,
			keyboard: true,
			show: true
	};
	$('#' + _id).modal(options);
	var modal = $('#' + _id);
	if(typeof(_title) != "undefined"){
		  if(modal.find('.modal-title').length <= 0){
			  var header = dialog.header({title : _title});
			  $($.parseHTML(header)).appendTo(modal.find(".modal-content"));
		  }else{
			  modal.find('.modal-title').text(_title);
		  }
		  if(modal.find('.modal-body').length <= 0){
			  var _body = dialog.body;
			  $($.parseHTML(_body)).appendTo(modal.find(".modal-content"));
		  }
		  modal.find(".modal-body").load(_url, $.proxy(function () {
			  modal.trigger('loaded.bs.modal');
			  initView();
	        }, this));
	  }else{
		  modal.find(".modal-content").load(_url, $.proxy(function () {
	          modal.trigger('loaded.bs.modal');
	          initView();
	        }, this));
	  }
	  //阻止事件默认行为
	event.preventDefault();
}

//modal model
//TO STRAT
if(!$(window).data("_modal_id")){
	$(window).data("_modal_id", 0);
}
var dialog = {
	header : function(options){
		var template = '<div class="modal-header">'
						+	'<button type="button" class="close" aria-label="Close" οnclick="hideModal(this);"><span aria-hidden="true">×</span></button>'
						+	'<h4 class="modal-title">' + options.title + '</h4>'
						+'</div>';
		return template;
	},
	content : function(){
		var _modal_id = $(window).data("_modal_id");
		var _id = "_modal_id_" + _modal_id;
		_modal_id ++;
		$(window).data("_modal_id", _modal_id);
		
		var template = '<div class="modal fade" tabindex="-1" role="dialog" id="'+ _id +'">'
		  +   '<div class="modal-dialog modal-lg" role="document" aria-hidden="true">'
		  +		'<div class="modal-content">'
		  +	    '</div>'
		  +   '</div>'
	  	  +'</div>';
		$(template).appendTo('body');
		initView();
		return _id;
	},
	body : '<div class="modal-body"></div>'
};
//TO END

页面代码:

<a href="select.html" id="signId" class="btn btn-info" target="dialog" title="请选择用餐类型">签到</a>

页面上只要在a标签后加上target="dialog",并且提供href外部链接地址就可以弹出modal框


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Sunking_Yin/article/details/56282182

智能推荐

php 随机抽取数组n个数据_php从数组中随机抽取n条数据-程序员宅基地

文章浏览阅读570次。当 抽取的元素为 1 时,返回非数组数据,所以,如果取的数量不确定是否为 1 的情况下,建议如下方式统一转换为数组。一共两个值,第1个放数组,第2个抽取的数量。_php从数组中随机抽取n条数据

机器学习-分类模型(鸢尾花案例)_鸢尾花模型-程序员宅基地

文章浏览阅读5.2k次,点赞8次,收藏103次。众所周知,鸢尾花根据 '花瓣长度','花瓣宽度','花萼长度','花萼宽度',分为三类,在数据集中分别用0,1,2来表示类别本次就是通过对鸢尾花特征进行训练来判断出为哪一类,用到了分类算法的4个模型一 导入库函数和数据集,该数据已经分好了训练集和测试集,直接导入import numpy as npimport pandas as pdimport matplotlib.pyplot as pltdata_train = pd.read_csv('./iris_training.csv'_鸢尾花模型

k8s--nfs 共享存储安装-程序员宅基地

文章浏览阅读182次。服务端:yum install nfs-utils -yyum -y install rpcbindsystemctl start nfssystemctl start rpcbindvi /etc/exports/data/nfs-volume 192.168.48.0/24(rw,no_root_squash)/etc/exports 可选参数注释:ro:只读rw:读写*:表示共享给所有网段,192.168.48.0 代表只允许这个网段访问sync:所有数据在请求时写入共享

vue3 elementui typescript input输入框不能输入的问题_vue 3 typescript 表单输入没反应-程序员宅基地

文章浏览阅读1.3k次。网上有很多教程,但是都是要么elementui,要么typescript缺一个,所以都无效,这应该是全网最全,最简约的方法。废话不多说,直接上代码vue部分<el-input v-model="form.name" @input="change($event)" placeholder="挂牌号" />JS部分<script lang="ts">import { defineComponent, reactive } from "vue";exp._vue 3 typescript 表单输入没反应

Java多线程读取本地照片为二进制流,并根据系统核数动态确定线程数_java访问多个图片url并保存本地用多线程newfixedthreadpool线程池个数-程序员宅基地

文章浏览阅读461次。Java多线程读取图片内容并返回1. ExecutorService线程池2. 效率截图3. 源码1. ExecutorService线程池ExecutorService线程池,并可根据系统核数动态确定线程池最大数;// 最大、最小线程数一致,均为系统核数*10+1;链表阻塞对列最多提交200个任务,这个值的设置很关键 private static int workerNum = Runtime.getRuntime().availableProcessors() * 10 + 1; pr_java访问多个图片url并保存本地用多线程newfixedthreadpool线程池个数

DVWA之File Inclusion(文件包含)-程序员宅基地

文章浏览阅读9.6k次,点赞3次,收藏14次。目录LOW:Medium:HighImpossibleLOW:源代码:&lt;?php// The page we wish to display$file = $_GET[ 'page' ];?&gt; 可以看到,low级别的代码对包含的文件没有进行任何的过滤!这导致我们可以进行包含任意的文件。当我们包含一个不存在的文件 haha.php ,看看会发生...

随便推点

JavaScript 高级-程序员宅基地

文章浏览阅读2.7k次,点赞6次,收藏36次。JavaScript 高级(JS 浏览器; JS Cookies ;JS 验证; JS 动画 ;JS 图像地图 ;JS 计时 ;JS 创建对象)

Linux系统性能指标_delayacct_blkio_ticks-程序员宅基地

文章浏览阅读4.3k次,点赞2次,收藏8次。云栖社区> 博客列表>正文 Linux系统性能指标 帅博2016-02-19 15:43:40 浏览3070评论2 linux阿里技术协会 性能指标 /proc/文件系统 计算方法 摘要: Linux内核提供的/proc/目录所提供的信息能够基本满足我们对当前主机性能指标的获取需求。现有网络上流传很多版本的对/proc/下文件各字段解释的bl_delayacct_blkio_ticks

JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)_shell判断jdk大于9-程序员宅基地

文章浏览阅读730次。重要提示:JDK9版本以上或者JDK9版本,才能使用简介:Java Shell工具是JDK1.9出现的工具, Java Shell工具(JShell)是一个用于学习Java编程语言和Java代码原型的交互式工具。JShell是一个Read-Evaluate-Print循环(REPL),它在输入时评估声明,语句和表达式,并立即显示结果。该工具从命令行运行。JShell有什么用那?可以测试单个语句十分简单的Java程序,省去了创建Java文件的过程JShell的命令:1.启动:jshell_shell判断jdk大于9

解决Python安装各种包的问题(持续更新)_py27 安装torch-程序员宅基地

文章浏览阅读141次。解决Python安装各种包的问题(持续更新)conda安装pytorch// 删除后面的 -c pythonconda install pytorch torchvision torchaudio cudatoolkit=10.2安装yaml在python27环境下安装pyyamlconda install pyyamlsci-imagepip install scikit-image五级标题六级标题..._py27 安装torch

C++ 判断一个字符是否是字母或数字_c++检查输入的字符串是否为数字或字母-程序员宅基地

文章浏览阅读6.8k次,点赞11次,收藏48次。isalnum() 函数用来检测一个字符是否是字母或者十进制数字。如果仅仅检测一个字符是否是字母,可以使用 isalpha() 函数;如果仅仅检测一个字符是否是十进制数字,可以使用 isdigit() 函数。如果一个字符被 isalpha() 或者 isdigit() 检测后返回“真”,那么它被 isalnum() 检测后也一定会返回“真”。标准 ASCII 编码共包含了 128 个字符,不同的字符属于不同的分类,我们在 <ctype.h> 头文件中给出了详细的列表。..._c++检查输入的字符串是否为数字或字母

CAD打印后图形不显示?_中望cad打印的图案消失-程序员宅基地

文章浏览阅读2.8k次。在CAD软件中,颜色一般分为索引颜色和真彩色。索引颜色是常用的255种颜色,并以【1-255】不同的编号来代表不同的颜色。真彩色是指将红绿蓝RGB三色分成0-255级(8位,也就是2的8次方)组合成24位(2的24次方,1600万种颜色)。下面就和小编一起来了解一下浩辰CAD软件中按颜色批量选择、CAD打印颜色设置以及CAD打印预览彩色显示的相关操作技巧吧!在浩辰CAD中,使用快捷命令:COL,即可调出【选择颜色】选项卡,能自由设定【索引颜色】和【真彩色】。虽然【真彩色】有更多的选择性,但是由于【真彩色】_中望cad打印的图案消失

推荐文章

热门文章

相关标签