<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>bootstrap模态框引用其他页面</title>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<h2>创建模态框（Modal）</h2>
		<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#register"> 开始演示模态框 </button>
		<div class="modal fade in"   id="register">
			<div class="modal-dialog modal-lg" >
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal" id="close">×</button>
					</div>
					<div class="modal-body" id="myBody" style="width: 100%;height: 100%;">
					</div>
					<div class="modal-footer">
							<button class="btn btn-info" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
        	/*<!--通过js加载模态框-->*/
        	/*$('#register').modal();*/
			$("#myBody").append("<iframe src='myPage.html' width='898px' height='556px' frameborder='0'></iframe>")
		</script>
	</body>
</html>

　　

BootStrap------之模态框1的更多相关文章

  1. Bootstrap 3 模态框播放视频

    Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...

  2. Bootstrap 实例 - 模态框（Modal）插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. bootstrap的模态框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  5. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  6. 黄聪：bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  7. layui实现类似于bootstrap的模态框功能

    以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...

  8. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

  9. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  10. bootstrap删除模态框弹出并询问是否删除【通用删除模态框】

    普通的询问是否删除的对话框比较low,可以利用bootstrap的模态框代替普通的对话框来实现删除. 效果: 点删除的时候弹出模态框询问是否删除,点确认的时候将需要删除的ID传到后台进行删除.  过程 ...

随机推荐

  1. 阿里云免费申请https证书

    申请地址   https://common-buy.aliyun.com/?spm=a2c4e.11153940.blogcont65199.22.30f968210RsUSx&commodi ...

  2. Vue笔记：使用 vuex 管理应用状态

    如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一 ...

  3. Docker容器使用jenkins部署web项目--总结（二）

    (1)需要安装Docker容器,在Docker容器内安装jenkins,gogs,tomcat.   新建maven项目,添加findbugs plugin. 使用docker启动jenkins,go ...

  4. 简单选择排序(Simple Selection Sort)

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  5. 201621123001 《Java程序设计》第7周学习总结

    1. 本周学习总结 1.1 思维导图:Java图形界面总结 1.2 可选:使用常规方法总结其他上课内容. 掌握了NetBeans基本使用方法 掌握布局管理器基本概念 尝试了自己在界面布置组件 网格组布 ...

  6. SpringMVC学习四（@ModelMap @RequestBody等等的说明）

    参考如下 http://www.cnblogs.com/HD/p/4107674.html http://www.cnblogs.com/qiankun-site/p/5774325.html @re ...

  7. java基础学习之单例设计模式学习

    最近狂补java基础的我重新学习了下单例,下面直接贴出代码,以作备忘 package com.darling.single; /** * 单例模式 * 单例即在内存中只存在该类的一个实例,要想实现这个 ...

  8. day 33 线程池有关的

    # cpu 的核心数# import os# print(os.cpu_count()) ## 爬虫的进程和线程的应用# 第一步 虚拟一个浏览器下载 在cmd 里输入 pip install requ ...

  9. 并发的HTTP请求，apache是如何响应的，以及如何调用php文件的

    作者:酒窝链接:https://www.zhihu.com/question/23786410/answer/153455460来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  10. 用户登陆代码py

    实现用户输入用户名和密码,当用户名为 seven 且 密码为 123 时,显示登陆成功,否则登陆失败! 实现用户输入用户名和密码,当用户名为 seven 且 密码为 123 时,显示登陆成功,否则登陆 ...