这是我希望我的弹出窗口看起来像的 FIDDLE...这很好用:
http://jsfiddle.net/mib92/x6yev5a0/
(display
都设置为:block;
)并且显示完美。
当我在我的代码中运行它时,我使用 JS 脚本来执行弹出窗口。
我的 HTML:
<a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>
line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>line <br>
<!--POPUP-->
<script type="text/javascript" src="css-pop.js"></script>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" onclick="popup('popUpDiv')" class="popclose">Click to Close CSS Pop Up</a>
</div>
<!-- END POPUP -->
我的 CSS:(与没有 display: block;
的 FIDDLE 相同,因为它在 HTML 中设置为 display:none;
)
#blanket {
background-color:#ff0024;
opacity: 0.65;
*background:none;
position:fixed;
z-index: 9001;
top:0px;
left:0px;
width:100%;
height:100%;
}
#popUpDiv {
position:fixed;
background-color:#ccc;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -200px;
}
这是 JS 代码:
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
我对JS代码的理解是#blanket
和#popUpDiv
将display:none;
改为display :block;
...但是弹出窗口没有像在 Fiddle 中那样定位在正确的位置?我不知道为什么......一定是 JS 中有什么东西导致了这个......因为 HTML 和 CSS 正确定位了弹出窗口......有什么想法吗?
谢谢
最佳答案
哦,我的...首先,你应该从 css 中删除它:
margin-left: -200px;
margin-top: -200px;
然后替换它:
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
有了那个:
popUpDiv_height=viewportheight/2-200;//200 is half popup's height
因为 blanket_height - 它是页面的全高。你只需要视口(viewport)的高度
关于javascript - 使用 JavaScript 脚本定位 CSS 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27697765/