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-10IE與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-04JS實(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-08javascript下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