如何将div弹出显示到页面中心？ [英] how to show div popup to the center of page?
本文介绍了如何将div弹出显示到页面中心？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何将div弹出窗口显示在page.my代码的中心，如下所示
How to show div popup to the center of page.my code as below
<style>
#modalContainer {
background-color:transparent;
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
background-image:url(tp.png); }
#alertBox {
position:relative;
width:300px;
min-height:100px;
border:2px solid #999;
background-color:#F2F5F6;
background-image:url(alert.png);
background-repeat:no-repeat;
background-position:20px 30px;
}
#modalContainer > #alertBox {
position:fixed;
}
#alertBox h1 {
margin:1px;
font:bold 12px verdana,arial;
background-color:#367cab;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:1px;
margin-left:8px;
}
</style>
<script>
var ALERT_TITLE = "Message";
var ALERT_BUTTON_TEXT = "Ok";
var DeletionConfirmation = 0;
var isMozilla;
var objDiv = null;
var over = false;
if(document.getElementById) {
window.alert = function(txt)
{ createCustomAlert(txt); }
}
function createCustomAlert(txt) {
Initialize();
d = document;
if(d.getElementById("modalContainer")) return;
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
mObj.style.height = d.documentElement.scrollHeight + "px";
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
alertObj.style.visiblity="visible";
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
h1.onmouseover= function() {over=true;return false;}
h1.onmouseout= function() {over=false;return false;}
h1.style.cursor="move";
msg = alertObj.appendChild(d.createElement("p"));
//msg.appendChild(d.createTextNode(txt));
msg.innerHTML = txt;
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
btn.focus();
btn.onclick = function() { removeCustomAlert();return false; }
alertObj.style.display = "block";
}
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
function AlertMsg()
{
alert('This is a custom alert dialog that was created by over-riding the window.alert method.');
}
function Initialize()
{
isMozilla = (document.all) ? 0 : 1;
if (isMozilla) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MouseDown;
document.onmousemove = MouseMove;
document.onmouseup = MouseUp;
}
function MouseDown(e) {
if (over) {
if (isMozilla) {
objDiv = document.getElementById('alertBox');
X = e.layerX;
Y = e.layerY;
return false;
}
else {
objDiv = document.getElementById('alertBox');
objDiv = objDiv.style;
X = event.offsetX;
Y = event.offsetY;
}
}
}
function MouseMove(e) {
if (objDiv) {
if (isMozilla) {
objDiv.style.top = (e.pageY - Y) + 'px';
objDiv.style.left = (e.pageX - X) + 'px';
return false;
}
else {
objDiv.pixelLeft = event.clientX - X + document.body.scrollLeft;
objDiv.pixelTop = event.clientY - Y + document.body.scrollTop;
return false;
}
}
}
function MouseUp() {
objDiv = null;
}
</script>
<body>
<input type="button" value = "Alert" onclick="AlertMsg()">
</body>
</html>
谢谢....
Thanks....
推荐答案
Refer这个。我希望它会有所帮助
使用jQuery将DIV置于屏幕中心 [ ^ ]
在屏幕css中心填充 [ ^ ] [逐个尝试每个链接]
还可以尝试position：fixed
Refer to this one.I hope it would be helpful
Using jQuery to center a DIV on the screen[^]
popup in center of screen css[^][Try each link one by one]
Also tryposition:fixed
Hasbina，
如果我是你，我将使用jquery，因为它处理跨浏览器语法。无论如何，您可以使用扩展名来实现此目的。但是你必须包含jquery文件。在页面的head部分添加
Hasbina,
If I were you I would be using jquery as it handles cross browser syntax. Anyways there is an extension you can usefor this purpose. But you will have to include jquery file. In the head section of your page add
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
结束时你的脚本添加：
At the end of your script add:
jQuery.fn.center = function () {
this.css("position", "absolute");
this.css("top", Math.max(0, ((
（ window ）。height（） -
(window).height() -
这篇关于如何将div弹出显示到页面中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
