bootstrap模態(tài)框垂直居中效果
本文實(shí)例效果其實(shí)就是一個(gè)點(diǎn)擊彈窗效果,供大家參考,具體內(nèi)容如下
先上jquery代碼
//模態(tài)框垂直居中
function centerModals() {
$('.modal').each(
function(i) {
var $clone = $(this).clone().css('display', 'block')
.appendTo('body');
var top = Math.round(($clone.height() - $clone.find(
'.modal-content').height()) / 2);
top = top > 0 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top",
top - 50);
});
}
$('.modal').on('show.bs.modal', centerModals);
$(window).on('resize', centerModals);
html代碼
<!--登陸彈窗-->
<form action="__URL__/doLogin" method="post" class="form-horizontal">
<!--模態(tài)框聲名-->
<div class="modal" id="myModal" tabindex="-1">
<!--窗口聲名-->
<div class="modal-dialog modal-sm">
<!--內(nèi)容聲名-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">用戶登錄</h4>
</div>
<div class="modal-body">
<div class="form-group has-success has-feedback">
<label for="username" class="col-sm-3 control-label">賬號(hào)</label>
<div class="col-sm-9">
<span class="glyphicon glyphicon-user form-control-feedback"
aria-hidden="true"></span> <span id="inputSuccess3Status"
class="sr-only">(success)</span> <input type="text"
id="username" name="username" class="form-control"
placeholder="請(qǐng)輸入您的用戶名" title="可包含中文數(shù)字和常用字符"
onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">
<!-- 禁用空格和回車 -->
</div>
</div>
<div class="form-group has-success has-feedback">
<label for="password" class="col-sm-3 control-label">密碼</label>
<div class="col-sm-9">
<span class="glyphicon glyphicon-lock form-control-feedback"
aria-hidden="true"></span> <span id="inputSuccess3Status"
class="sr-only">(success)</span> <input type="password"
id="password" name="password" class="form-control"
maxlength="12" placeholder="請(qǐng)輸入您的密碼" oncopy="return false"
oncut="return false" onpaste="return false" title=""
onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success" id="login">現(xiàn)在登錄
»</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript獲得頁(yè)面base標(biāo)簽中url的方法
這篇文章主要介紹了JavaScript獲得頁(yè)面base標(biāo)簽中url的方法,涉及javascript中元素的獲取及href屬性的使用技巧,需要的朋友可以參考下2015-04-04
微信小程序 點(diǎn)擊切換樣式scroll-view實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了微信小程序 點(diǎn)擊切換樣式scroll-view實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
IE與FF下javascript獲取網(wǎng)頁(yè)及窗口大小的區(qū)別詳解
本篇文章主要是對(duì)IE與FF下javascript獲取網(wǎng)頁(yè)及窗口大小的區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01
原生js實(shí)現(xiàn)跨瀏覽器獲取鼠標(biāo)按鍵的值
e.button W3C是獲取鼠標(biāo)按鍵 0 表示左鍵 1表示中鍵 2表示右鍵 而IE瀏覽器則是 1表示左鍵 4表示中間 2表示右鍵 這里的IE瀏覽器主要是IE8以下的瀏覽器,感興趣的朋友可以參考下哈2013-04-04
JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)彈出浮動(dòng)窗口,可支持鼠標(biāo)拖動(dòng)和關(guān)閉的功能,界面美觀大方,涉及javascript動(dòng)態(tài)創(chuàng)建對(duì)話框的相關(guān)技巧,需要的朋友可以參考下2015-08-08
javascript下arguments,caller,callee,call,apply示例及理解
在看到大家如此關(guān)注JS里頭的這幾個(gè)對(duì)象,我試著把原文再修改一下,力求能再詳細(xì)的闡明個(gè)中意義2009-12-12
利用webpack理解CommonJS和ES Modules的差異區(qū)別
這篇文章主要介紹了利用webpack理解CommonJS和ES Modules的差異區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
你所不了解的javascript操作DOM的細(xì)節(jié)知識(shí)點(diǎn)(一)
這篇文章主要介紹了你所不了解的javascript操作DOM的細(xì)節(jié)知識(shí)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2015-06-06

