Bootstrap Modal遮罩彈出層代碼分享
更新時間：2016年11月21日 11:14:52 作者：my98800
本文給大家分享的這段代碼并非是Bootstrap的遮罩，只是簡單版的遮罩效果，對bootstrap modal 遮罩效果感興趣的朋友可以參考下本文
下面這段代碼并非是Bootstrap的遮罩，只是簡單版的遮罩效果，Bootstrap那個太啰嗦了。如果你鐘情Bootstrap的那個遮罩，來看看這篇文章“完全版：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ù)自己需求修改：原文來自：http://m.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代碼，點擊出現(xià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遮罩彈出層代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JS數(shù)組方法reverse()用法,結(jié)合實例形式分析了JS數(shù)組reverse()方法基本功能、用法與操作注意事項,需要的朋友可以參考下2020-01-01
別踩白塊是一款音樂類休閑游戲，游戲的玩法不難，只需跟著音樂的節(jié)奏點中對的方塊即可。本文將用JavaScript實現(xiàn)這一經(jīng)典游戲，感興趣的可以了解一下2022-05-05
這篇文章主要給大家介紹了一些手寫的JavaScript常用的函數(shù)，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了JS實現(xiàn)DOM刪除節(jié)點操作,結(jié)合實例形式分析了javascript使用removeChild()操作頁面dom節(jié)點刪除功能的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04
這段js代碼得節(jié)約你多少時間，學(xué)習(xí)js的朋友可以參考下。2011-12-12
layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法
今天小編就為大家分享一篇layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要給大家介紹了關(guān)于利用原生JS獲取URL鏈接參數(shù)的幾種常見方法,文中通過實例代碼以及圖文介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler),下面這篇文章主要給大家介紹了關(guān)于webpack打包進度展示以及美化的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了JavaScript中Cookie操作實例,本文先是講解了Cookie的語法,然后給了實際操作實例,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了鼠標拖拽移動子窗體的JS實現(xiàn),需要的朋友可以參考下2014-02-02