ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

bootstrap模态框手动开启关闭与设置点击外部不关闭

2020-04-02 10:07:25  阅读:296  来源: 互联网

标签:模态 手动 关闭 bootstrap 开启 modal myModal1


完整的参考菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

1.手动开启与关闭模态框的方法  按钮开启与JS函数开启(2种)

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 模态框(Modal)插件</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/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="#myModal1">
    按钮开启
</button>

        <a href="javascript:void(0)" class="btn btn-default" onclick="openMotai()">JS函数开启</a>

        <script type="text/javascript">
            function openMotai(){
                alert("准备开启");
                $("#myModal1").modal('show');  //手动开启
                alert("准备关闭");
                $("#myModal1").modal('hide');  //手动关闭
                alert("准备开启");
                $("#myModal1").modal();  //手动开启
            }
        </script>

        <!-- 模态框(Modal) -->
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <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"> 模态框(Modal)标题 </h4> </div> <div class="modal-body"> username:<input type="text" name="" id="" value="" /><br /> password: <input type="password" name="" /> </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> </body> </html>
复制代码

2.有时候我们希望点击esc或者点击模态框外部的时候不会关闭

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 模态框(Modal)插件</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/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="#myModal1">
    按钮开启
</button>

        <a href="javascript:void(0)" class="btn btn-default" onclick="openMotai()">JS函数开启</a>

        <script type="text/javascript">
            function openMotai(){
                /*alert("准备开启");
                $("#myModal1").modal('show');  //手动开启
                alert("准备关闭");
                $("#myModal1").modal('hide');  //手动关闭
                alert("准备开启");
                $("#myModal1").modal();  //手动开启*/
                $("#myModal1").modal({backdrop: 'static', keyboard: false});  //手动开启
                
                
            }
        </script>

        <!-- 模态框(Modal) -->
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <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">
                    模态框(Modal)标题
                </h4>
                    </div>
                    <div class="modal-body">
                        username:<input type="text" name="" id="" value="" /><br /> password:
                        <input type="password" name="" />
                    </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>
    </body>

</html>
复制代码

分析:

$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 
其中 ,backdrop:’static’指的是点击背景空白处不被关闭; 
keyboard:false指的是触发键盘esc事件时不关闭。

 

另一种方式是直接在模态框标签加::

<!-- 模态框黑名单单位添加-->
<div class="modal fade" id="myModal" role="dialog"
data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="true">

 参看自链接:https://www.cnblogs.com/qlqwjy/p/7491054.html

标签:模态,手动,关闭,bootstrap,开启,modal,myModal1
来源: https://www.cnblogs.com/vole/p/12617768.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有