bootstrap模態框手動開啟關閉與設置點擊外部不關閉

本文轉載自查看原文 2017-09-07 18:00 35265 Bootstrap

完整的參考菜鳥教程: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">

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap模態框手動開啟關閉與設置點擊外部不關閉 bootstrap模態框手動開啟關閉與設置點擊外部不關閉關於手動關閉BootStrap模態框【轉】Android AlertDialog 點擊對話框外部區域不關閉的設置 bootstrap 模態框關閉 bootstrap模擬框(顯示隱藏,點擊其他位置不關閉) 手動開啟和關閉mysql bootstrap modal （模態框）在手機端輸入自動放大問題解決方案--關閉手動放大縮小功能 Bootstrap手動打開隱藏模態框 Bootstrap開啟模態框后對數據處理(標記模態框的開啟與關閉狀態)