2011-07-05 6 views
1

지금 모달 창을 열려면 링크를 클릭해야합니다. 링크를 클릭하지 않고도이 작업을로드하는 방법을 모르겠습니다. 누구든지이 방법을 보여 주시겠습니까? 감사합니다.모달 창 자바 스크립트 CSS 오버레이

<!DOCTYPE> 
<script type="text/javascript"> 
function overlay() { 
     el = document.getElementById("overlay"); 
     el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 
} 
</script> 
<style type="text/css"> 
body { 
    height:100%; 
    margin:0; 
    padding:0; 
} 
#overlay { 
    visibility: hidden; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width:100%; 
    height:100%; 
    text-align:center; 
    z-index: 1000; 

     background:black; 
      /* Required for IE 5, 6, 7 */   /* ...or something to trigger hasLayout, like zoom: 1; */   width: 100%;   /* Theoretically for IE 8 & 9 (more valid) */   /* ...but not required as filter works too */   /* should come BEFORE filter */   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";   /* This works in IE 8 & 9 too */   /* ... but also 5, 6, 7 */   filter: alpha(opacity=90);   /* Older than Firefox 0.9 */   -moz-opacity:0.9;   /* Safari 1.x (pre WebKit!) */   -khtml-opacity: 0.9;   /* Modern!   /* Firefox 0.9+, Safari 2?, Chrome any?   /* Opera 9+, IE 9+ */   opacity: 0.9; 
} 
#overlay div { 
    width:300px; 
    margin: 100px auto; 
    background-color: #fff; 
    border:1px solid #000; 
    padding:15px; 
    text-align:center; 
} 
</style> 
</head> 
<body> 
<div id="overlay"> 
    <div> 
      <p>Content you want the user to see goes here.</p> 
      Click here to [<a href='#' onclick='overlay()'>close</a>] 
    </div> 
</div> 

<p><a href='#' onclick='overlay()'>Click here to show the overlay</a> 
</p> 
</body> 
</html> 

답변

1

당신은 다음과 같이 당신의 몸 태그를 변경 부하에 전화 할 경우 :

<body onLoad="overlay()"> 

이제 대화가 빨리 페이지가로드로 표시됩니다.


방법 링크

하는 방법으로 당신이 원하는 않는를 클릭하지 않고도로드 이 일을 만들어? 마우스를 올리면? 길 위에? 더 구체적으로 말하십시오.