<div id="dialogbg" style="display: none;"> <div class="dialog" style="left: 679px; top: 269px;"> <div class="title" unselectable="on"> <div> 消息</div> </div> <div class="content"> 请输入您的姓名</div> <div class="text"> <input type="text"></div> <div class="btns"> <button class="ok"> 确定</button> <button class="cancel"> 取消</button></div> </div> </div>
#dialogbg {
background: rgba(0,0,0,.2);
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
margin: 0;
left: 0;
top: 0;
}
* html #dialogbg {
_position: absolute;
_top: expression(offsetParent.scrollTop);
}
#dialogbg .dialog {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
border: 1px solid #666;
display: inline-block;
position: absolute;
background: white;
text-align: left;
overflow: hidden;
margin: auto;
left: 50%;
top: 50%;
behavior: url("PIE.htc");
*behavior: none;
}
dialogbg样式是黑色的背景,设置position为fixed,无论滚动条怎么滚动,dialogbg都是以浏览器的左上角为起点,并且不动。把弹出框dialog放在dialogbg的里面,设置position为absolute,所以他也不会随浏览器的滚动而动位置。
人人网面试题
用 js、html、css实现一个弹出提示控件:
1. 分别实现类似于系统的 alert、confirm、prompt对话框;
<div id="wrap"> <br> 请点击下面的链接弹出对框框 <br> <a href="javascript:msgbox('你好,欢迎使用 Windows 8 旗舰版')">alert</a> <br> <a href="javascript:msgbox('您确定要关闭计算机吗?',function(t){alert(t)})">confirm</a> <br> <a href="javascript:msgbox('请输入您的姓名',function(t){alert(t)},'匿名')">prompt</a> </div> <script> function msgbox(msg, fun, text) { var dialogbg = document.querySelector("#dialogbg"); if (!dialogbg) { dialogbg = document.createElement("div"); dialogbg.id = "dialogbg"; document.body.appendChild(dialogbg); } dialogbg.innerHTML = '<div class="bgcolor"></div><div class="dialog"><div class="title" unselectable="on"><div>消息</div></div><div class="content"></div><div class="text"><input type="text"></div><div class="btns"><button class="ok">确定</button><button class="cancel">取消</button></div></div>'; dialogbg.querySelector(".content").innerHTML = msg || " "; function hide(sel) { dialogbg.querySelector(sel).style.display = "none"; } var btnOk = dialogbg.querySelector(".ok"), btnCancel = dialogbg.querySelector(".cancel"); if (fun) { if (text == undefined) { hide(".text"); btnOk.onclick = function () { fun(true); } btnCancel.onclick = function () { fun(false); } } else { var textbox = dialogbg.querySelector("input"); textbox.value = text; btnOk.onclick = function () { fun.call(textbox, textbox.value); } } } else { hide(".cancel"); hide(".text"); } function btnClose() { dialogbg.style.display = "none"; } btnOk.addEventListener("click", btnClose, true); btnCancel.addEventListener("click", btnClose, true); dialogbg.style.display = "block"; var dialog = dialogbg.querySelector(".dialog"); dialog.style.left = (dialogbg.offsetWidth - dialog.offsetWidth) / 2 + "px"; dialog.style.top = (dialogbg.offsetHeight - dialog.offsetHeight) / 2 + "px"; drag(dialog, dialog.querySelector(".title")); } function drag(dialog, titleBar) { var onDrag, pos = {}, dialogbg = document.querySelector("html"); titleBar.addEventListener("mousedown", function (e) { pos.left = dialog.offsetLeft; pos.top = dialog.offsetTop; pos.x = e.pageX; pos.y = e.pageY; onDrag = true; }, false); dialogbg.addEventListener("mousemove", function (e) { if (onDrag) { dialog.style.left = (pos.left + e.pageX - pos.x) + "px"; dialog.style.top = (pos.top + e.pageY - pos.y) + "px"; } }, false); titleBar.onselectstart = function () { return false; } dialogbg.onmouseup = function () { onDrag = false; } } </script>