2013-12-25 4 views
-2

im using look a lightbox. но моя проблема заключается в том, что он полностью загружает всю веб-страницу до запуска скрипта. Как я могу заставить мой скрипт запускать 1-й? и не ждите загрузки страницы?html css javascript, Как запустить скрипт перед загрузкой веб-страницы?

CSS:

#overlay { 
    display:none;  
    position:fixed; 
    left:0px;   
    top:0px;   
    width:100%;  
    height:100%;  
    background-image:url(gray.png); 
    z-index:99999; 
} 

#popup { 
    display:none; 
    position:fixed;  
    width:500px; 
    margin-left:400px; 
    margin-right:300px; 
    top:15%; 
    height:auto; 
    background-color:white; 
    z-index:100000;  
border-radius: 3px; 
    box-shadow: 0px 0px 0px 12px rgba(0,0,0,0.3); 
} 

HTML:

<script type="text/javascript"> 
window.onload = function() { 
     var overlay = document.getElementById("overlay"); 
     var popup = document.getElementById("popup"); 
     overlay.style.display = "block"; 
     popup.style.display = "block"; 

     document.getElementById("CloseBtn").onclick = function(){ 
     var overlay = document.getElementById("overlay"); 
     var popup = document.getElementById("popup"); 
     overlay.style.display = "none"; 
     popup.style.display = "none";  
    } 
}; 
</script> 

<div id="overlay"></div> 
<div id="popup"> 

blah blah blah 
+0

вы можете использовать только методы DOM, когда DOM дерево укомплектовать построен – Shadow

ответ

1

Это именно то, что делает window.onload = function() { ... }.

Если вы не хотите, чтобы это делалось, не говорите об этом.

0

Использование window.onpaint.

<script type="text/javascript"> 
    window.onpaint = function() { 
     // Do stuff 
     } 
    }; 
</script> 

Но, будьте осторожны, вы не можете использовать элементы DOM внутри скрипта.

0

Просто переместите сценарий в конце документа, чуть выше </body> и удалите window.onload:

<script type="text/javascript"> 
var overlay = document.getElementById("overlay"); 
var popup = document.getElementById("popup"); 
overlay.style.display = "block"; 
popup.style.display = "block"; 
// ... 
</script> 
</body> 
</html> 
+0

я попробовал это, но это не будет работать мой кронштейн правильно?

+0

@AllenAquino Создайте jsfiddle, который воспроизводит проблему. –

0

я уже попробовать удалить window.onload, но это не будет работать мой кронштейн правильно?

<script type="text/javascript"> 
     var overlay = document.getElementById("overlay"); 
     var popup = document.getElementById("popup"); 
     overlay.style.display = "block"; 
     popup.style.display = "block"; 

     document.getElementById("CloseBtn").onclick = function(){ 
     var overlay = document.getElementById("overlay"); 
     var popup = document.getElementById("popup"); 
     overlay.style.display = "none"; 
     popup.style.display = "none";  
} 
}; 
</script> 
+0

Я вижу 2 закрывающие скобки, но только одно отверстие. – Rhyono

Смежные вопросы