久草青青草视频,亚洲伊人成色综合人影院

模態彈出框--觸發模態彈出窗2種方法

眾所周知，模態彈出窗在頁面加載完成時，是被隱藏在頁面中的，只有通過一定的動作（事件）才能觸發模態彈出窗的顯示。在Bootstrap框架中實現方法有2種，接下來分別來介紹這2種觸發模態彈出窗的使用方法。

聲明式觸發方法：

方法一：模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發方法一般依賴于這些自定義的data-xxx 屬性。比如data-toggle="" 或者 data-dismiss=""）。例如：

<!-- 觸發模態彈出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button>
<!-- 模態彈出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模態彈出窗內容 -->
        </div>
    </div>
</div>

注意以下事項：

1、data-toggle必須設置為modal(toggle中文翻譯過來就是觸發器)；

2、data-target可以設置為CSS的選擇符，也可以設置為模態彈出窗的ID值，一般情況設置為模態彈出窗的ID值，因為ID值是唯一的值。

方法二：觸發模態彈出窗也可以是一個鏈接<a>元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性，如：

<!-- 觸發模態彈出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊我會彈出模態彈出窗</a>
<!-- 模態彈出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模態彈出窗內容 -->
        </div>
    </div>
</div>

不過建議還是使用統一使用data-target的方式來觸發。

點擊按鈕就能觸發彈出窗：

任務

我來試試：在右側代碼編輯器添加代碼，以實現2種觸發模態彈出窗的方法

?不會了怎么辦

index.html

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>模態彈出窗的使用</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body>   <a class="btn btn-primary">通過鏈接href屬性觸發</a>  <div class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="mymodal-link"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </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> </div> </div>  <button class="btn btn-primary" type="button">通過data-target觸發</button>  <div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </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> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

8-7 模態彈出框--觸發模態彈出窗2種方法

模態彈出框--觸發模態彈出窗2種方法

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

8-7 模態彈出框--觸發模態彈出窗2種方法

熱搜

最近搜索清空

模態彈出框--觸發模態彈出窗2種方法

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～