Модальное окно javascript css оверлей - PullRequest
Новая
       15

Модальное окно javascript css оверлей

1 голос
/ 05 июля 2011

Прямо сейчас я должен нажать на ссылку, чтобы открыть модальное окно.Я не знаю, как сделать эту вещь для загрузки без необходимости нажимать на ссылку.Может кто-нибудь, пожалуйста, покажите мне, как это сделать?Спасибо! 

<!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 Ответ

1 голос
/ 05 июля 2011

Если вы хотите вызвать его при загрузке, измените тег тела следующим образом: 

<body onLoad="overlay()">

Теперь диалог будет отображаться, как только страница будет загружена.

как сделать эту вещь для загрузки без необходимости нажимать на ссылку

Каким образом вы хотите?при наведении мышки?в процессе?Будьте более конкретным.

...