JavaScriptはモダリティを実現し、ウィンドウをドラッグすることができます.
5042 ワード
<html>
<head>
<style>
div.titleBar{background: #2279F3;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;}
div.closeButton{float: right;}
div.mainBody{margin: auto;}
#divModalDialog{border:solid 1px;background:white;POSITION: absolute;left:0px;top:0px;DISPLAY: none;z-index:2;height:200px;WIDTH: 350px;}
#divModal{BACKGROUND-COLOR:#ECE9D8; FILTER: alpha(opacity=50);opacity: 0.5; LEFT: 0px; POSITION:absolute; TOP: 0px}
</style>
<script>
function showModel()
{
divModalDialog.style.display = "block";
resizeModal();
window.onresize = resizeModal;
doSelect("hidden");
}
function closeModel()
{
divModal.style.width = "0px";
divModal.style.height = "0px";
divModalDialog.style.display = "none";
window.onresize = null;
doSelect("visible");
}
function doSelect(status)
{
var allObj=document.getElementsByTagName( "select");
for(i=0;i<allObj.length;i++){
if(allObj.getAttribute("hide")!="true"){
allObj.style.visibility=status;
}
}
}
function resizeModal()
{
divModal.style.width = document.body.scrollWidth;
divModal.style.height = document.body.scrollHeight;
divModalDialog.style.left = ((document.body.offsetWidth - divModalDialog.offsetWidth) / 2);
divModalDialog.style.top = ((document.body.offsetHeight - divModalDialog.offsetHeight) / 2);
}
var mouseOffset = null;
var iMouseDown = false;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
if(iMouseDown){
divModalDialog.style.left = mousePos.x-mouseOffset.x;
divModalDialog.style.top = mousePos.y-mouseOffset.y;
}
}
function mouseUp(ev){
iMouseDown = false;
}
function mouseDown(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.getAttribute("id") == "title"){
iMouseDown = true;
mouseOffset = getMouseOffset(target,ev);
}
}
function mouseCoords(ev) {
if(ev.pageX || ev.pageY) {
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function getMouseOffset(target, ev) {
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y} ;
}
function getPosition(e) {
var left = 0;
var top = 0;
while (e.offsetParent) {
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top} ;
}
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
</script>
</head>
<body>
<input type="button" value=" " onclick="showModel()" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<select><option>a</option><option>b</option></select>
<!-- div select， ， select ， -->
<!-- select， 。-->
<!-- hide="true" -->
<select hide="true" style="visibility:hidden"><option>a</option><option>b</option></select>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input >
<!-- -->
<DIV id="divModal"></div>
<!-- end -->
<!-- -->
<DIV id="divModalDialog" >
<div class="titleBar" id="title">
<div class="closeButton"><a href="javascript:closeModel();">[X]</a></div>
</div>
<div class="mainBody">
</div>
</DIV><!-- end -->
</body>
</html>