Bootstrap Modal遮罩彈出層代碼分享
更新時(shí)間：2016年11月21日 11:14:52 作者：my98800
本文給大家分享的這段代碼并非是Bootstrap的遮罩，只是簡(jiǎn)單版的遮罩效果，對(duì)bootstrap modal 遮罩效果感興趣的朋友可以參考下本文
下面這段代碼并非是Bootstrap的遮罩，只是簡(jiǎn)單版的遮罩效果，Bootstrap那個(gè)太啰嗦了。如果你鐘情Bootstrap的那個(gè)遮罩，來(lái)看看這篇文章“完全版：Bootstrap彈出層遮罩”。
<div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:void(0);" title="關(guān)閉" class="close">×</a> <h3>登錄 是一種態(tài)度</h3> </div> <div class="theme-popbod dform"> <form class="theme-signin" name="loginform" action="" method="post"> <ol> <li><h4>你必須先登錄！</h4></li> <li><strong>用戶名：</strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li> <li><strong>密碼：</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li> <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 錄 " /></li> </ol> </form> </div> </div> <div class="theme-popover-mask"></div>
via重要的CSS，里面的內(nèi)容樣式可以根據(jù)自己需求修改：原文來(lái)自：http://www.fzitv.net/article/97841.htm
//code from http://caibaojian.com/bootstrap-modal.html
.theme-popover-mask {
z-index: 9998;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.4;
filter:alpha(opacity=40);
display:none
}
.theme-popover {
z-index:9999;
position:fixed;
top:50%;
left:50%;
width:660px;
height:360px;
margin:-180px 0 0 -330px;
border-radius:5px;
border:solid 2px #666;
background-color:#fff;
display:none;
box-shadow: 0 0 10px #666;
}
jQuery代碼，點(diǎn)擊出現(xiàn)，點(diǎn)擊右上角關(guān)閉
jQuery(document).ready(function($) {
$('.theme-login').click(function(){
$('.theme-popover-mask').fadeIn(100);
$('.theme-popover').slideDown(200);
})
$('.theme-poptit .close').click(function(){
$('.theme-popover-mask').fadeOut(100);
$('.theme-popover').slideUp(200);
})
})
以上所述是小編給大家介紹的Bootstrap Modal遮罩彈出層代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JS數(shù)組方法reverse()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法reverse()用法,結(jié)合實(shí)例形式分析了JS數(shù)組reverse()方法基本功能、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
別踩白塊是一款音樂(lè)類休閑游戲，游戲的玩法不難，只需跟著音樂(lè)的節(jié)奏點(diǎn)中對(duì)的方塊即可。本文將用JavaScript實(shí)現(xiàn)這一經(jīng)典游戲，感興趣的可以了解一下2022-05-05
這篇文章主要給大家介紹了一些手寫的JavaScript常用的函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS實(shí)現(xiàn)DOM刪除節(jié)點(diǎn)操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)DOM刪除節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了javascript使用removeChild()操作頁(yè)面dom節(jié)點(diǎn)刪除功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
這段js代碼得節(jié)約你多少時(shí)間，學(xué)習(xí)js的朋友可以參考下。2011-12-12
layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法
今天小編就為大家分享一篇layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
原生JS獲取URL鏈接參數(shù)的幾種常見(jiàn)方法
這篇文章主要給大家介紹了關(guān)于利用原生JS獲取URL鏈接參數(shù)的幾種常見(jiàn)方法,文中通過(guò)實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler),下面這篇文章主要給大家介紹了關(guān)于webpack打包進(jìn)度展示以及美化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
這篇文章主要介紹了JavaScript中Cookie操作實(shí)例,本文先是講解了Cookie的語(yǔ)法,然后給了實(shí)際操作實(shí)例,需要的朋友可以參考下2015-01-01
鼠標(biāo)拖拽移動(dòng)子窗體的JS實(shí)現(xiàn)
這篇文章主要介紹了鼠標(biāo)拖拽移動(dòng)子窗體的JS實(shí)現(xiàn),需要的朋友可以參考下2014-02-02