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

http://www.cnblogs.com/qlqwjy/p/7491054.html

完整的參考菜鳥教程: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事件時不關閉。

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

http://www.cnblogs.com/qlqwjy/p/7491054.html 完整的參考菜鳥教程:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html 1.手動開啟與關閉模態框的方法

bootstrap模態框自動彈出與手動彈出詳解

bootstrap模態框自動彈出功能與js 無關，手動彈出則需要js去控制兩者的區別：自動彈出需要在按鈕多設定一個data-target屬性target到模態框的id , JS控制彈出的話需要在按鈕加個click事件$("#Mymodal").modal("show")，

Bootstrap開啟模態框後對資料處理(標記模態框的開啟與關閉狀態)

JS用全域性變數標記狀態，方法中動態修改全域性變數以標記狀態是一個重要思想。　　需求:組合條件查詢資料，查詢完之後填充到模態框中，開啟模態框，模態框中有組合條件查詢，此時查詢只需要更新模態框表格資料不需要開啟模態框，也就是讓模態框開啟方法執行一次。 (點查詢的時候只更新資料不會再次開啟模

bootstrap模態框點選空白處模態框不消失、監聽模態框開啟還是關閉

1.在div上新增 aria-hidden="true" 屬性 aria-hidden="true" 用於保持模態視窗不可見，直到觸發器被觸發為止（比如點選在相關的按鈕上）。 data-show

jQuery 模態框的開啟關閉事件

以下是Bootstrap 模態框 //模態框的觸發事件 <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">發動演示模態框</a></p>

angularjs 與 bootstrap 模態框問題

李宜衡發現了一個問題，在用angularjs寫的時候發現bootstrap的模態框在單頁面跳轉時不會自動關閉.就是這樣:在點選模態框時會彈出: 但當你填寫完資訊點選儲存時，切換檢視後模態框並不會關閉此時頁面還是陰影狀態且無法儲存. 一開始雖然不知道為什麼會這樣

BootStrap 模態框禁用空白處點選關閉

模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊、互動等。bootstrap的模態框在預設情況下，點選其他空白區域（通常是遮罩層），模態框會被關閉，那麼以下方法就是禁止點選其他區域關閉

Bootstrap 模態框避免點選背景處關閉

問題： Bootstrap 模態框在使用者點選背景空白處時，會自動關閉。解決方法：在HTML頁面中編寫模態框時，在div初始化時新增屬性 aria-hidden=”true” data-bac

Bootstrap 模態框在點選頁面空白處關閉

近期在使用bootstrap-dialog外掛，在使用時發現通過modal('show')顯示的對話方塊可以在點選頁面空白處關閉，也就是不是模態對話方塊，這不是預期的效果，搜尋之後發現只需進行下面設定

BootStrap模態框，點選儲存後實現模態框自動關閉的思路

需求如下：在彈出的模態框中點選 “更換” 按鈕後實現模態框自動關閉，做法：給“更換“按鈕加上：data-dissmiss="modal" <button type="button

bootstrap 模態框顯示時點選遮罩層禁止關閉，點選按鈕時關閉模態框。

1.頁面載入完成時彈出模態框：首先要在HTML中新增：aria-hidden="true" data-backdrop="static" $(function(){ $('.modal').mo

html5的bootstrap模態框與js之間的值傳遞

1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="utf-8">  <l

bootstrap 模態框提交按鈕之後就關閉模態框

Bootstrap -- 模態框實現拖拽移動

file set sin boot css modal 鏈接 href 需要 ### 　　這裏實現這個效果　　需要引入 jquery-ui.min.js類庫　　jquery-ui.min.css樣式　　使用它提供的draggable()方法實現 ### 菜

Bootstrap模態框的使用2

submit cat 函數 mail role jstl esp utf-8 add 模態框中顯示一些基本的數據以及觸發一些基本的JS函數 <%@ page language="java" contentType="text/html; charset=UTF-

bootstrap模態框遠程加載網頁的正確處理方式

clas 處理加載網頁 logs def lose 刷新客戶端粘貼 bootstrap模態框遠程加載網頁的方法在bootsrap模態框文檔裏給出了這個方法：使用鏈接模式 <a data-toggle="modal" href="tieniu.php

bootstrap模態框嵌套、tabindex屬性、去除陰影

樣式元素不存在 logs dia src out belle rop 模態框嵌套在開發中，遇到需要通過點擊事件觸發第一個模態框，觸發後通過事件喚起第二個模態框，並且通過事件觸發第三個模態框；即模態框嵌套。模態框嵌套需要用一個模態框包裹所涉及嵌套的模態框，從而點擊

bootstrap:模態框

arc -h something another false rand amp current and <nav class="navbar navbar-default"> <div class="container-fluid"> &

bootstrap模態框顯示控制

mage alt images image true 顯示 str es2017 log 默認模態框彈出後，點擊背景蒙層部分彈框會消失，如要解決，需要在模態框屬性中加 aria-hidden="true" data-backdrop="static"屬性即可； boo

bootstrap 模態框中彈出層 input不能獲得焦點且不可編輯

描述焦點 input 問題 class light -i oot 模態框 bootstrap 模態框中彈出層 input不能獲得焦點且不可編輯問題描述：bs框架支持一層model層的情況下，在模態框中彈出了自定義的彈出層。發現自定義彈出層的輸入框不能獲得焦點且不可編輯。

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

相關推薦