如何在頁面加載時顯示div？

http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

這裏，DIV（模態窗口）點擊鏈接後載入。我想擺脫那個鏈接並打開頁面加載模式。

我的代碼如下：一切都是相同的，除了我添加腳本和刪除鏈接

<!DOCTYPE html> 
<html> 
<head> 
    <title>Modal Window</title> 
    <style type="text/css"> 
     .modalDialog 
     { 
      position: fixed; 
      font-family: Arial, Helvetica, sans-serif; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 
      background: rgba(0,0,0,0.8); 
      z-index: 99999; 
      opacity: 0; 
      -webkit-transition: opacity 400ms ease-in; 
      -moz-transition: opacity 400ms ease-in; 
      transition: opacity 400ms ease-in; 
      pointer-events: none; 
     } 
     .modalDialog:target 
     { 
      opacity: 1; 
      pointer-events: auto; 
     } 
     .modalDialog > div 
     { 
      width: 400px; 
      position: relative; 
      margin: 10% auto; 
      padding: 5px 20px 13px 20px; 
      border-radius: 10px; 
      background: #fff; 
      background: -moz-linear-gradient(#fff, #999); 
      background: -webkit-linear-gradient(#fff, #999); 
      background: -o-linear-gradient(#fff, #999); 
     } 
     .close 
     { 
      background: #606061; 
      color: #FFFFFF; 
      line-height: 25px; 
      position: absolute; 
      right: -12px; 
      text-align: center; 
      top: -10px; 
      width: 24px; 
      text-decoration: none; 
      font-weight: bold; 
      -webkit-border-radius: 12px; 
      -moz-border-radius: 12px; 
      border-radius: 12px; 
      -moz-box-shadow: 1px 1px 3px #000; 
      -webkit-box-shadow: 1px 1px 3px #000; 
      box-shadow: 1px 1px 3px #000; 
     } 
     .close:hover 
     { 
      background: #00d9ff; 
     } 
    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      $("#openModal").show(); 
     }); 
    </script> 

</head> 
<body> 
    <div id="openModal" class="modalDialog"> 
     <div> 
      <a href="#close" title="Close" class="close">X</a> 
      <h2> 
       Modal Box</h2> 
      <p> 
       This is a sample modal box that can be created using the powers of CSS3.</p> 
      <p> 
       You could do a lot of things here like have a pop-up ad that shows when your website 
       loads, or create a login/register form for users.</p> 
     </div> 
    </div> 
</body> 
</html>

類似的問題在這裏問：How to Auto Popup a CSS3 Modal Window When Page Loads?

但它沒有幫助。

我自己也嘗試沒有任何的運氣以下腳本：

$(document).ready(function() { 
    $("#openModal").click(); 
}); 


$(document).ready(function() { 
    $(".modalDialog").show(); 
});

我一定要在這裏做了什麼。

任何想法？

來源

2013-12-15 Icarus3

試$（文件）。就緒（函數（）{ $（「＃openModal」）觸發（ '點擊'）; }）; –

的問題是，.show()是不會改變的$("#openModal")

透明度做

$(document).ready(function() { 
    // the first arg is duration of the effect, second is the opacity to end at 
    $("#openModal").fadeTo(500, 1); 
});

Check out the Fiddle

由於OP指出，「解僱模式按鈕」不工作

Updated Fiddle Demostrating a working dismiss button

來源

2013-12-15 20:33:37 robbmj

這個工程，但「關閉」按鈕不起作用。 – Icarus3

另外奇怪的是懸停效果不起作用。 – robbmj

大部分的機會都是因爲模態未初始化，而只是顯示。 – Dementic

爲@Charaf JRA建議，你應該觸發與點擊：

$(document).ready(function() { $(".modalDialog").modal() }

來源

2013-12-15 20:23:02 Dementic

$(window).load(function(event){ 
    $(".modalDialog").show(); 
})

：在另一方面

$(document).ready(function() { $("#openModal").trigger('click'); });

，大部分的機會都可以使用的onload觸發它

來源

2013-12-15 20:23:45

使用'setTimeout'的壞習慣你應該除掉它@harsha，除非你真的必須使用它。 – Dementic

@Dementic：好的，但你會讓我知道爲什麼這是一個不好的做法？我想知道。 –

'setTimeout'不能保證「ANY」對象被加載，或者在那裏，也不保證任何功能或任何東西。你應該進行檢查，看看它是否存在。 *編輯*，如果你已經驗證那些在那裏，那麼沒有理由使用'setTimeout'嗎？ – Dementic

要觸發點擊事件，請使用trigger()：

$(document).ready(function() { 
    $("#openModal").trigger('click'); 
});

來源

2013-12-15 20:28:27

-2

你有不透明度：0;爲.modalDialog。在這種情況下，您需要使用fadeTo而不是show。

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     $(".modalDialog").fadeTo(1,1); 
    }); 
</script>

來源

2013-12-15 20:44:44 bring2mind

複製他人的答案是一個不行。歡迎來到SO。 – Dementic

如何在頁面加載時顯示div？

回答

相關問題