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

最新推荐文章于 2024-04-20 12:04:09 发布

ok060

最新推荐文章于 2024-04-20 12:04:09 发布

阅读量605

点赞数 11

文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/ok060/article/details/136035077

版权

本文解释了Bootstrap模态框如何通过数据属性实现自动弹出，无需JavaScript，以及如何使用JavaScript进行动态控制。重点介绍了data-target属性在自动弹出中的作用和手动控制时的click事件应用。

摘要由CSDN通过智能技术生成

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>