js實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例
更新時(shí)間：2016年10月09日 20:14:13 投稿：jingxian
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
在一些頁(yè)面中，我們總會(huì)遇到一些彈窗不居中的時(shí)候，還要根據(jù)瀏覽器的大小來調(diào)整彈窗的彈出位置，
之前我也遇到這樣的問題，現(xiàn)在我把我知道的呈現(xiàn)給大家
css樣式
.windowBox{
width:500px;
}
.mid-tanBox{
position: fixed; top: 50%; left: 50%; margin-left: -250px; background: #fff; border:1px solid red; display:none
}
html代碼
<div class='windowBox'> <div class ="mid-tanBox"></div> <div class="jclick">彈窗</div> </div>
jQuery代碼自動(dòng)：
$(".jclick").click(function(i){
var height = $(".mid-tanBox").height();
var eheight = height/2;
$(".mid-tanBox").eq(i).css("margin-top","-eheight");
})
以上就是小編為大家?guī)淼膉s實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
基于JavaScript實(shí)現(xiàn)本地圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)本地圖片預(yù)覽的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了js注入，黑客之路必備！本文告訴大家什么是js注入，如何進(jìn)行js注入攻防，感興趣的小伙伴們可以參考一下2016-09-09
手機(jī)注冊(cè)發(fā)送驗(yàn)證碼倒計(jì)時(shí)的簡(jiǎn)單實(shí)例
下面小編就為大家分享一篇手機(jī)注冊(cè)發(fā)送驗(yàn)證碼倒計(jì)時(shí)的簡(jiǎn)單實(shí)例。具有很好的參考價(jià)值，一起跟隨小編過來看看吧，希望對(duì)大家有所幫助2017-11-11
JS call()及apply()方法使用實(shí)例匯總
這篇文章主要介紹了JS call()及apply()方法使用實(shí)例匯總,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
用javascript獲得css中的屬性值的代碼...2007-08-08
element?table?點(diǎn)擊某一行中按鈕加載功能實(shí)現(xiàn)
在Element UI中,實(shí)現(xiàn)表格（element-table）中的這種功能通常涉及到數(shù)據(jù)處理和狀態(tài)管理,這篇文章主要介紹了element?table?點(diǎn)擊某一行中按鈕加載功能,需要的朋友可以參考下2024-06-06
這篇文章介紹了使用js復(fù)制鏈接中的部分文字的方法，技巧很實(shí)用，需要的朋友可以參考下2015-07-07
jquery中validate與form插件提交的方式小結(jié)
這篇文章主要介紹了jquery中validate與form插件提交的方式小結(jié),需要的朋友可以參考下2016-03-03
uni-app?中清除定時(shí)器實(shí)現(xiàn)方法詳解
這篇文章主要為大家介紹了uni-app?中清除定時(shí)器實(shí)現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了如何去除js中的json存在的轉(zhuǎn)義字符\問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09