2012-03-12 51 views
0

JQuery和web dev一般的新手。 我一直試圖讓確認覆蓋simplemodal演示工作,所以它彈出與我的網站的初始加載警報。初始加載時的simplemodal對話框

以下是標準示例,但我已包含$(document).ready()函數以嘗試在啓動時觸發模式對話框。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' /> 
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' /> 
<script type='text/javascript' src='js/jquery.js'></script> 
<script type='text/javascript' src='js/jquery.simplemodal.js'></script> 
<script type='text/javascript' src='js/confirm.js'></script> 

<script language="JavaScript" type="text/javascript"> 
    $(document).ready(function() { 
     $('#confirm-dialog').modal();  
    }); 
</script> 
</head> 
<body> 
<div id='container'> 

    <div id='content'> 
     <div id='confirm-dialog'> 
      <input type='button' name='confirm' class='confirm' value='Demo'/> 
     </div> 

     <!-- modal content --> 
     <div id='confirm'> 
      <div class='header'><span>Confirm</span></div> 
      <div class='message'></div> 
      <div class='buttons'> 
       <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div> 
      </div> 
     </div> 
     <!-- preload the images --> 
     <div style='display:none'> 
      <img src='img/confirm/header.gif' alt='' /> 
      <img src='img/confirm/button.gif' alt='' /> 
     </div> 
    </div> 
</div> 

</body> 
</html> 

然而,這不火,和我有什麼用Firebug的經驗有限,我看不到任何錯誤,所以必須是我的代碼邏輯是問題?

+0

嘗試刪除從腳本標記語言屬性下載jquery.ui文件。 – Abhidev 2012-03-12 07:33:15

回答

1

它適用於我在JSFiddle。怎麼樣使用jQuery UI庫.dialog方法:

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' /> 
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' /> 
<script type='text/javascript' src='js/jquery.js'></script> 
<script type='text/javascript' src='js/jquery.ui.js'></script> 
<script type='text/javascript' src='js/confirm.js'></script> 

<script language="JavaScript" type="text/javascript"> 
    $(document).ready(function() { 
     $('#confirm-dialog').dialog({modal: true});  
    }); 
</script> 
</head> 
<body> 
<div id='container'> 

<div id='content'> 
    <div id='confirm-dialog'> 
     <input type='button' name='confirm' class='confirm' value='Demo'/> 
    </div> 

    <!-- modal content --> 
    <div id='confirm'> 
     <div class='header'><span>Confirm</span></div> 
     <div class='message'></div> 
     <div class='buttons'> 
      <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div> 
     </div> 
    </div> 
    <!-- preload the images --> 
    <div style='display:none'> 
     <img src='img/confirm/header.gif' alt='' /> 
     <img src='img/confirm/button.gif' alt='' /> 
    </div> 
</div> 
</div> 

</body> 
</html> 

您可以從here

+0

謝謝,但沒有變化。 – Simon 2012-03-12 08:07:18

+0

我編輯了這個例子,使其更加清晰。請看... – 2012-03-12 08:40:43

+0

我仍然無法得到這個工作。我不熟悉JSFiddle,但是如果我將它複製到我的機器上,並用firebug在firefox中測試,它仍然不會觸發模式彈出窗口,除非我單擊演示按鈕。我相信這段代碼看起來非常接近。 – Simon 2012-04-15 04:45:35