js實現彈窗居中的簡單實例
更新時間：2016年10月09日 20:14:13 投稿：jingxian
下面小編就為大家?guī)硪黄猨s實現彈窗居中的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在一些頁面中，我們總會遇到一些彈窗不居中的時候，還要根據瀏覽器的大小來調整彈窗的彈出位置，
之前我也遇到這樣的問題，現在我把我知道的呈現給大家
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代碼自動：
$(".jclick").click(function(i){
var height = $(".mid-tanBox").height();
var eheight = height/2;
$(".mid-tanBox").eq(i).css("margin-top","-eheight");
})
以上就是小編為大家?guī)淼膉s實現彈窗居中的簡單實例全部內容了，希望大家多多支持腳本之家~
相關文章
這篇文章主要介紹了JavaScript中的對象序列化介紹,JavaScript中的對象序列化是通過JSON.stringify()來實現的,而反序列化則通過JSON.parse()來實現,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了基于JavaScript實現拖動滑塊效果，拖動滑塊時數字進行變化，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
javascript刪除option選項的多種方法，方便大家選用。2008-11-11
這篇文章主要給大家介紹了關于JavaScript數組常用的增刪改查與其他屬性的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
本文將對在網頁中引用js常會出現的問題進行匯總，并提出解決問題的具體方案，有助于我們更好的學習和使用js，需要的朋友一起來看下吧2016-12-12
在代碼邏輯中更多的是用關聯數組的方式。但即使是這樣我們也很少使用對象類型作為鍵值對的鍵名。2010-07-07
使用濾鏡設置透明導致 IE 6/7/8/9 解析異常的解決方法
使用濾鏡設置透明導致 IE 6/7/8/9 解析異常的解決方法，需要的朋友可以參考下。2011-04-04
這篇文章主要介紹了js下劃線和駝峰互相轉換的實現,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-11-11
詳解JavaScript基礎知識（JSON、Function對象、原型、引用類型）
這篇文章主要介紹了JavaScript基礎知識（JSON、Function對象、原型、引用類型）的相關資料，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-01-01
這篇文章主要給大家介紹了關于JavaScript中事件監(jiān)聽的相關資料,在前端開發(fā)過程中我們經常會遇到給頁面元素添加事件的問題,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-08-08