bootstrap-href触发模态弹出窗元素

已于 2022-02-26 18:40:06 修改
阅读量316 收藏
点赞数
分类专栏： jsp、jquery、ajax 文章标签： bootstrap html css
于 2022-02-20 15:02:03 首次发布
原文链接：https://blog.csdn.net/weixin_34138056/article/details/89755659
版权 
菜鸟教程
https://www.runoob.com/bootstrap/bootstrap-forms.html
https://www.runoob.com/try/try.php?filename=bootstrap3-plugin-modal
2.实现代码如下
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 模态框（Modal）插件</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-login">
	 立即登录
</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-register">
	立即注册
 </button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
	style="width: 680px;height: 640px;margin: 0 auto;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						登录
					</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="loginForm" name="loginForm" 
					action="${path}/login.do" method="post" onsubmit="return logs(&#39;click&#39;)">
					
					<div class="control-group">
						<label class="control-label" for="Lcard_num">账号</label>
						<div class="controls">
							<input type="text" name="userName" id="Lcard_num"
								style="height: 5%; margin-top: 3px; margin-right: 3px;"
								required="required"><span id="Lcn">请输入账号！</span>
							<!-- chrom ie11 input bug 5% height fixed it -->
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="Lcard_pass">密码</label>
						<div class="controls">
							<input type="password" name="password" id="Lcard_pass"
								style="height: 5%; margin-top: 3px; margin-right: 3px;"
								required="required"><span id="Lcp">请输入密码！</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="Lcard_code">验证码</label>
						<div class="controls">
							<input type="text" name="code" id="Lcard_code"
								style="height: 5%; margin-top: 3px; margin-right: 3px;width:100px;"
								required="required">
								<img id="imgcode" onclick="changeCode(this);" title="看不清，单击更换" alt="看不清，单击更换" style="display:none;width:80px;height:30px;cursor:pointer;">
								<span id="Lcd">请输入验证码！</span>
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<input type="submit" name="sub" id="loginSub" value="登录"
								class="btn btn-danger btn-block" style="margin-left: -90px; height: 30px; *background: #f2000d;">
						</div>
					</div>
				</form>
				</div>
				<!-- <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary">
						提交更改
					</button>
				</div> -->
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

   <!--  注册 -->
	<div class="modal fade" id="myModal-register" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" style="width: 680px;height: 640px;margin: 0 auto;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">注册（用户）</h4>
				</div>
				<div class="modal-body">
				   <form class="form-horizontal" id="signForm" name="signForm" 
					action="${path}/sign.do" method="post">
					
					<div class="control-group">
						<label class="control-label" for="Scard_num">账号</label>
						<div class="controls">
							<input type="text" name="userName" id="Scard_num"
								style="height: 5%; margin-top: 3px; margin-right: 3px;"
								required="required" maxlength="10"><span id="Lcn">请输入账号！</span>
							<!-- chrom ie11 input bug 5% height fixed it -->
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="Scard_pass">密码</label>
						<div class="controls">
							<input type="password" name="password" id="Scard_pass"
								style="height: 5%; margin-top: 3px; margin-right: 3px;"
								required="required"><span id="Lcp">请输入密码！</span>
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="Scard_grade">年级</label>
						<div class="controls">
							<select name="grade" id="Scard_grade"
								style="height: 5%; margin-top: 3px; margin-right: 3px;"
								required="required">
                                    <option value="2022">2022</option>
                                    <option value="2021">2021</option>
                                    <option value="2020">2020</option>
                                    <option value="2019">2019</option>
                                    <option value="2018" selected="selected">2018</option>
                                    <option value="2017">2017</option>
                                    <option value="2016">2016</option>
                                    <option value="2015">2015</option>
                                    
							</select>
								<span id="Lcd">请选择年级！</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="Scard_name">姓名</label>
						<div class="controls">
							<input type="text" name="name" id="Scard_name"
								style="height: 5%; margin-top: 3px; margin-right: 3px;"
								required="required"><span id="Lcp">请输入姓名！</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="Scard_telphone">电话</label>
						<div class="controls">
							<input type="text" name="telPhone" id="Scard_telphone"
								style="height: 5%; margin-top: 3px; margin-right: 3px;"
								required="required"><span id="Lcp">请输入电话！</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="Scard_email">邮箱</label>
						<div class="controls">
							<input type="text" name="email" id="Scard_email"
								style="height: 5%; margin-top: 3px; margin-right: 3px;"
								required="required"><span id="Lcp">请输入邮箱！</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="Scard_qq">QQ</label>
						<div class="controls">
							<input type="text" name="qq" id="Scard_qq"
								style="height: 5%; margin-top: 3px; margin-right: 3px;"
								required="required"><span id="Lcp">请输入QQ！</span>
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<input type="submit" name="sign" id="SignSub" value="注册"
								class="btn btn-danger btn-block" style="margin-left: -90px; height: 30px; *background: #f2000d;">
						</div>
					</div>
				</form>
				</div>
				<!-- <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" name="sign" id="SignSub" value="注册" class="btn btn-primary">注册</button>
				</div> -->
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
</html>
PSW_18722821243
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap之模态框
catherine_sfy的博客
03-01 434
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 ...
Bootstrap的模态弹出框--模态弹出窗的使用（JavaScript触发）
实践求真知
02-04 2610
一 代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;模态弹出窗的使用（三）&lt;/title&gt; &lt;link rel="stylesheet" href="//maxcdn.boo
bootstrap模态弹出框
weixin_34296641的博客
11-23 163
模态弹出框（Modals）这一小节我们先来讲解一个“模态弹出框”，插件的源文件：modal.js。右侧代码编辑器（30行）就是单独引入 bootstrap 中发布出的“modal.js”文件。样式代码：LESS版本：modals.lessSass版本：_modals.scss编译后的Bootstrap：对应bootstrap.css文件第5375行～第5496行在 Bo...
Bootstrap的模拟框加载href时只显示第一次href的内容
weixin_43434136的博客
09-16 288
bootstrap模拟框嵌入jsp页面 如果电脑上没有web容器，浏览器会阻止模拟框加载href的界面。 百度上有说往浏览器快捷方式的属性的选项：目标之后加 --allow-file–access-from-files。但是我改过之后还是报错，可能是我的操作有问题，也可能是chrome修复这个不安全操作。 设置a标签href属性。 <a href="target.jsp" data-toggle="modal" data-target="#myModal" >target url = tar
bootstrap weebox 支持ajax的模态弹出框
12-08
Bootstrap Weebox是一款基于Bootstrap框架开发的模态弹出框插件，专为解决原生Bootstrap模态框功能不足的问题而设计。它不仅具备响应式布局，还支持AJAX加载内容，以及图片预览等丰富的功能。对于原生Bootstrap模态...
Bootstrap基础-模态弹出框
小白的博客
08-05 1235
1. Bootstrap基础-模态弹出框 Bootstrap框架中的模态弹出框，分别运用了"modal"、“modal-dialog” 和 “modal-content” 样式，而弹出窗真正的内容都防止在"modal-content" 中，其主要又包括三个部分： 弹出框头部，modal-header，包括标题和关闭按钮； 弹出框主体，modal-body，弹出框的主要内容； 弹出框脚步，moda...
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
08-31
本文将深入探讨如何扩展Bootstrap的Modal模态框，实现动态添加和弹出多个Modal框。 首先，我们需要理解Bootstrap Modal的基本结构。一个基本的Modal由三部分组成：`<div class="modal">`（模态对话框）、`.modal-...
Bootstrap 标签页跳转的两种方式 href和data-target
尼尔里恩
11-27 8006
Bootstrap标签页需要用一个data-target或者一个指向 DOM 中容器节点的href 在html中的跳转一般用href写，但是在框架中，可能会导致用href自动走路由的的可能。所以我的解决方法一般是把href换成另外一种方式，即data-target的方式。代码如下所示 <ul id="myTab" class="nav nav-tabs"> <li ...
bootstrap href data-target 可以是Id,class
qq_33271461的博客
04-02 524
bootstrap href data-target 属性值可以是ID，也可以是类。如果填写类的话，就可以应用于多个元素。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x...
点击a标签传值到模态
落单的缘
11-19 1842
&lt;td&gt; &lt;div style="width:100px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"&gt; &lt;a href="javascript:;" func="btnDescription" d...
bootstrap组件 -- (笔记三)
lljxk2008的博客
10-22 236
 添加该 pagination样式来在页面上显示分页 &lt;ul class="pagination"&gt;     &lt;li&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;1&lt;/
bootstrap的弹出窗体操作
最新发布
lxyforever5的博客
04-11 2365
2.点击事件后打开窗口，通过show进行打开，dlgAddOpenWindow是需要进行弹窗的标签Id。4.弹框显现隐藏时会触发的操作（是在父页面进行的操作）1.以a标签为例，设置为弹窗操作。3.需要弹窗的内容结构。
关于BootStrap中Modal（模态框）使用心得
热门推荐
heshouyou的博客
12-24 6万+
关于BootStrap中Modal（模态框）使用心得 一、modal使用： 1.1、登录bootstrap官网，点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js，需要导入bootstrap.js或者bootstrap.min.js文件，bootstrap的前提是jquery，所以我们要在导入bootstrap.js前面导入jquery.min.js 对
bootstrap模态框的详细用法
neos的博客
10-10 1万+
本文介绍了bootstrap中模态框的用法，在文章中我尽量将这一功能说明详细，同时我忽略了部分大部分情况不会使用的属性，也插入一些个人在实际工作中的观点，本文的目标是在你看完本文以后能够较为熟练的使用模态框这一功能，并且不会碰到太多坑。首次写微博，不足之处希望各位看官见谅，如果有大佬看的不爽的也请多多指正，在这里先谢过了。最后如果您喜欢我的文章麻烦点个赞哦。
【Bootstrap】实现 Bootstrap 基本布局
bug制造者
12-08 1万+
原文地址：https://www.cnblogs.com/haogj/p/4980353.html 最终结果： 创建基本的页面 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp
Bootstrap 基本样式-按钮
litengbin的博客
01-19 2万+
按钮样式 可以用于  按钮元素  超链元素  按钮类型的input元素   提交类型的input元素   重置类型的input元素 原始样式按钮 把button标签变成了平面的，一般不使用 原始样式按钮默认按钮 无色按钮 默认按钮提交按钮 用于提交数据 提交按钮成功按钮 一般用于
Bootstrap基本样式
烟锁着秦楼的博客
11-21 4437
使用Bootstrap之前下载它所需的文件，登录官网www.getbootstrap.com 下载该框架的文件和源码。点击Download跳转到下载页面 点击download进行下载 做好准备工作后就可以创建项目了，项目结构： Bootstrap 基本模板 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head lang=&quot;en&quot;&amp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值