bootstrap模态框自动弹出与手动弹出详解

最新推荐文章于 2024-03-19 16:46:58 发布

Demonor_

最新推荐文章于 2024-03-19 16:46:58 发布

阅读量3w

点赞数 10

分类专栏： html 文章标签： boostrap手动开启模态框模态框模态框手动开启模态框自动与手动 boostrap 模态框

本文链接：https://blog.csdn.net/a13432421434/article/details/70475044

版权

html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

bootstrap模态框自动弹出功能与js 无关，手动弹出则需要js去控制

两者的区别：自动弹出需要在按钮多设置一个data-target属性target到模态框的id , JS控制弹出的话需要在按钮加个click事件$("#Mymodal").modal("show")，关闭时还是要手动关闭$("#Mymodal").modal("hide")

1.bootstrap模态框自动弹出演示

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>bootstrap 弹出模态框</title>  
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">  
<script src="bootstrap-3.3.5-dist/js/jquery-2.1.4.min.js"></script>  
<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script> 
<script>
	$(document).ready(function(){
		$("#Mymodal").click(function(){
			$("#new").modal("show")
		})
	})
	</script> 
</head>  
<body>  
<button class="btn btn-success" data-toggle="modal" data-target="#new"> //多了data-target="#new"

 <span style="color:#ff0000;"></span>
自动弹出模态框
 </button>  
 
 <button class="btn btn-success" data-toggle="modal" id="Mymodal" >//没有data-target属性，但是有上面的JS  click事件

 <span style="color:#ff0000;"></span>
js控制弹出模态框
 </button> 
  
 <div class="modal fade" id="new">
            <div class="modal-dialog">  
              <div class="modal-content">  
                <div class="modal-header"> Create a new user </div>  
                <form class="form-horizontal">  
                  <div class="modal-body">  
                    <div class="form-group">  
                      <label for="inputEmail" class="col-sm-2 control-label">Email</label>  
                      <div class="col-sm-10">  
                        <input id="inputEmail" type="text" class="form-control list-inline" placeholder="Email"/>  
                      </div>  
                    </div>  
                    <div class="form-group">  
                      <label for="inputpwd" class="col-sm-2 control-label">Password</label>  
                      <div class="col-sm-10">  
                        <input id="inputpwd" type="text" class="form-control list-inline" placeholder="Password"/>  
                      </div>  
                    </div>  
                    <div class="form-group">  
                      <label for="inputUsername" class="col-sm-2 control-label">Username</label>  
                      <div class="col-sm-10">  
                        <input id="inputUsername" type="text" class="form-control list-inline" placeholder="Username"/>  
                      </div>  
                    </div>  
                    <div class="form-group">  
                      <label for="inputBirthday" class="col-sm-2 control-label">Birthday</label>  
                      <div class="col-sm-10">  
                        <input id="inputBirthday" type="text" class="form-control list-inline" placeholder="Birthday"/>  
                      </div>  
                    </div>  
                  </div>  
                </form>  
                <div class="modal-footer">  
                  <button class="btn btn-success" type="submit">Save</button>  
                  <button class="btn btn-warning" type="reset">Reset</button>  
                  <button class="btn btn-danger" data-dismiss="modal">Cancel</button>  
                </div>  
              </div>  
            </div>  
          </div>  
  
</body>  
</html>

Demonor_

关注

10
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
bootstrap模态框自动弹出与手动弹出详解

bootstrap模态框自动弹出功能与js 无关，手动弹出则需要js去控制两者的区别：自动弹出需要在按钮多设置一个data-target属性target到模态框的id , JS控制弹出的话需要在按钮加个click事件$("#Mymodal").modal("show")1.bootstrap模态框自动弹出演示 bootstrap 弹出模态框
复制链接

扫一扫