boostrap中模態(tài)窗口的學(xué)習(xí)與總結(jié)-創(chuàng)新互聯(lián)
一．模態(tài)窗口是什么？
是這樣一種效果喲：
二。
一． 組成
頭部（包括標(biāo)題和關(guān)閉按鈕）
中間（主要內(nèi)容）
底部（主要是放置操作按鈕）
對應(yīng)在html代碼中的布局是：使用div容器元素，分別使用modal,modal-dialog,modal-cotent樣式，而在modal-content內(nèi)包含彈窗的header,body,footer,分別使用三個(gè)樣式：modal-header,modal-body,modal-footer，如下圖：
三，實(shí)現(xiàn)代碼
<style>
.modal {//該樣式是做背景容器的，100%充滿全屏，還有當(dāng)內(nèi)容很多時(shí)，k可以在modal里進(jìn)行滾動(dòng)操作
position: fixed;//固定布局的
top: 0;
right: 0; //設(shè)置上下左右都為0，表示充滿全屏
bottom: 0;
left: 0;
z-index: 1050;//提升z-index，防止其他元素溢出
display: none;//默認(rèn)不顯示
overflow: hidden;
-webkit-overflow-scrolling: touch;//支持移動(dòng)設(shè)備上，觸摸進(jìn)行移動(dòng)
outline: 0;//消除虛邊框
}
.modal-dialog {
position: relative;//相對與Modal元素，進(jìn)行相對定位
width: auto;//寬度自適應(yīng)
margin: 10px;//外邊距10像素
}
.modal-content {主要對彈窗進(jìn)行邊框，邊距，背景色，陰影的處理
position: relative;//
background-color: #fff;
-webkit-background-clip: padding-box;//背景的裁剪區(qū)域設(shè)置從padding區(qū)域向外
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);//透明度設(shè)置
border-radius: 6px;
outline: 0;//取消輪廓顯示
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-header {//彈窗的頭部設(shè)置
min-height: 16.42857143px;//最小高度設(shè)置
padding: 15px;
border-bottom: 1px solid #e5e5e5;//底部設(shè)細(xì)線，與modal-body區(qū)分
}
.modal-header .close {//關(guān)閉按鈕
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.42857143;//頭部內(nèi)部的標(biāo)題樣式
}
.modal-body {//中間內(nèi)容區(qū)域
position: relative;
padding: 15px;
}
.modal-footer {//底部設(shè)置
padding: 15px;
text-align: right;//居右對齊，一般都是按鈕
border-top: 1px solid #e5e5e5;
}
</style>
<body>
<!-- <button data-toggle="modal" data-target="#popucss" class="btn btn-success" >單擊彈出模態(tài)窗口</button> --><!-- //觸發(fā)元素（使用聲明式語法）
//彈窗主要內(nèi)容 --><!-- //下面寫id的是js使用方法（使用聲明式語法）
//彈窗主要內(nèi)容 -->
<button id="dianji" class="btn btn-success">單擊彈出模態(tài)窗口</button>
<!-- 彈窗主要內(nèi)容 -->
<div class="modal" id="dianjiji"><!-- 第一部分 -->
<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>
<h3 class="modal-title">登錄系統(tǒng) </h3>
</div>
<div class="modal-body">
<p>彈窗里的具體內(nèi)容,hhh ajbh </p>
</div>
<div class="modal-footer">
<button type="button"
id="login" class="btn btn-success ">登錄</button>
<button type="button"
id="login" class="btn btn-success ">取消</button>
</div>
</div>
</div>
</div>
<script src="./bootstrap-3.3.5/dist/js/jquery.min.js"></script>
<script src="./bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
<script src="./bootstrap-3.3.5/dist/js/modal.js"></script>
<script>
$(function() {
$("#dianji").click(function() {
$("#dianjiji").modal("show");
});
})
四。Js 中的使用：
（1）聲明式語法
data-toggle,data-target,給觸發(fā)元素上設(shè)置，data-toggle的值必須為modal ，dat-target的值是：css選擇符
（2）javascript用法：
1）使用屬性控制：backdrop 布爾值 值為true,則單擊背景（不包括彈窗本身）時(shí)，關(guān)閉彈窗，否則，反之。
keyboard 布爾值 值為true,則按esc時(shí)，關(guān)閉彈窗，否則反之。
$("#dianjiji").modal({
backdrop:true,
keyboard:false,
show:true;
})
2）使用參數(shù)控制：toggle $(“#mymodal”).modal(“toggle”)，觸發(fā)時(shí)，反彈窗口的狀態(tài)，
Show $(“#mymodal”).modal(“show”),觸發(fā)時(shí)，顯示彈窗
Hide $(“#mymodal”).modal(“hide”),觸發(fā)時(shí)，關(guān)閉
3）使用方法控制：
Show.bs.modal 在show方法調(diào)用時(shí)立即觸發(fā)
Shown.bs.modal 該事件在模態(tài)彈窗完全顯示給用戶之后，觸發(fā)
Hide.bs.modal 在hide方法調(diào)用時(shí)，立即觸發(fā)
Hiden.bs.modal 該事件在模態(tài)彈窗隱藏之后觸發(fā)
使用方法
$(“#mymodal”).on(‘方法名’,function(e){
//處理代碼。。。
})
創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。
當(dāng)前文章：boostrap中模態(tài)窗口的學(xué)習(xí)與總結(jié)-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://m.rwnh.cn/article38/hscsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、商城網(wǎng)站、定制網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站排名、云服務(wù)器
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- C#利用SFTP實(shí)現(xiàn)上傳下載-創(chuàng)新互聯(lián)
- 怎么在nginx中限制IP惡意調(diào)用短信接口-創(chuàng)新互聯(lián)
- 使用python播放音頻的方法-創(chuàng)新互聯(lián)
- 解讀什么是消息推送成功送達(dá)率-創(chuàng)新互聯(lián)
- iOS如何實(shí)現(xiàn)斷點(diǎn)上傳文件-創(chuàng)新互聯(lián)
- docker容器一啟動(dòng)就退出該如何修改-創(chuàng)新互聯(lián)
- POJ測試數(shù)據(jù)合集(轉(zhuǎn))-創(chuàng)新互聯(lián)
- 外貿(mào)網(wǎng)站建設(shè)需要了解哪些方面 2022-07-04
- 外貿(mào)網(wǎng)站建設(shè)制作設(shè)計(jì)方案與價(jià)格 2022-08-08
- 成都外貿(mào)網(wǎng)站建設(shè)：符合谷歌SEO的網(wǎng)站結(jié)構(gòu)選擇 2016-02-29
- 外貿(mào)網(wǎng)站建設(shè)的網(wǎng)址策略 2016-11-02
- 外貿(mào)網(wǎng)站建設(shè)，價(jià)值才是制勝法寶 2016-11-14
- 外貿(mào)網(wǎng)站建設(shè) 成都公司 2016-10-19
- 外貿(mào)網(wǎng)站建設(shè)需要注意什么問題 2023-03-25
- 對外貿(mào)網(wǎng)站建設(shè)來說，最重要的是什么 2021-10-01
- 成都外貿(mào)網(wǎng)站建設(shè)應(yīng)該具備的功能有哪些？ 2018-02-25
- 外貿(mào)網(wǎng)站建設(shè)為什么推薦使用美國主機(jī) 2016-04-30
- 成都外貿(mào)網(wǎng)站建設(shè)服務(wù)優(yōu)勢總結(jié) 2016-09-19
- 外貿(mào)網(wǎng)站建設(shè)過程中的六大注意事項(xiàng) 2016-09-14