JQuery模態對話框的行爲不如示例

首先，我是總體上對JQuery和Web技術不熟悉的人員。到目前爲止，我一直在玩node.js/expressjs/jade.js和JQuery幾周。JQuery模態對話框的行爲不如示例

由於某種原因，我只是不能得到模態對話框的工作。以下代碼顯示按鈕和按鈕單擊顯示「對話框」。這個對話框只是按鈕下方的div元素，而不是按鈕。最重要的是，你不能移動按鈕，風格與JQuery示例中顯示的不一樣。

可能有人種，並指出問題或複製粘貼工作示例。謝謝。

<html> 
    <head> 
    <title>Places Server</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all"/> 
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script> 
     jQuery(document).ready(function(){ 
      jQuery("#myButton").click(showDialog); 
       //variable to reference window 
       $myWindow = jQuery('#myDiv'); 

       //instantiate the dialog 
       $myWindow.dialog({ height: 350, 
         width: 400, 
         modal: true, 
         position: 'center', 
         autoOpen:false, 
         title:'Hello World' 
         //overlay: { opacity: 0.5, background: 'black'} 
         }); 
       } 

    ); 
     //function to show dialog 
     var showDialog = function() { 
     //if the contents have been hidden with css, you need this 
     $myWindow.show(); 
     //open the dialog 
     $myWindow.dialog("open"); 
     } 

     //function to close dialog, probably called by a button in the dialog 
     var closeDialog = function() { 
     $myWindow.dialog("close"); 
     } 
    </script> 
    </head> 
    <body>  
    <input id="myButton" name="myButton" value="Click Me" type="button"/> 
    <div id="myDiv" style="display:none" class="ui-dialog ui-widget ui-widget-content ui-corner-all undefined ui-draggable ui-resizable"> 
     <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span></div> 
     <div id="dialog" class="ui-dialog-content ui-widget-content"> 
     <p>I am a modal dialog</p> 
     </div> 
    </div> 
    </body> 
</html>

來源

2012-07-07 Markku

工作演示http://jsfiddle.net/LPeeC/

問題是您的單擊事件，休息，你可以玩的演示，

這應有助於，:)

代碼

$(document).ready(function(){ 
    jQuery("#myButton").click(function(e){ 
      showDialog() 

      e.preventDefault(); 
      }); 
       //variable to reference window 
       $myWindow = jQuery('#myDiv'); 

       //instantiate the dialog 
       $myWindow.dialog({ height: 350, 
         width: 400, 
         modal: true, 
         position: 'center', 
         autoOpen:false, 
         title:'Hello World' 
         //overlay: { opacity: 0.5, background: 'black'} 
         }); 
       } 

    ); 
     //function to show dialog 
     var showDialog = function() { 
     //if the contents have been hidden with css, you need this 
     $myWindow.show(); 
     //open the dialog 
     $myWindow.dialog("open"); 

     } 

     //function to close dialog, probably called by a button in the dialog 
     var closeDialog = function() { 
     $myWindow.dialog("close"); 
     }

來源

2012-07-07 08:36:26

我看到的唯一區別是你設置了e.preventDefault（）;即使我添加該對話框靜態地位於按鈕下方。我不相信這是JavaScript的問題。這更像是CSS或HTML問題。 – Markku 2012-07-07 09:02:03

@ user867487 ??嗯，太棒了！很高興你注意到了差異，okies和我在帖子中提到的是什麼？「你叫你點擊的方式」anyhoo男人希望這有助於！放輕鬆，** plz **注意右鍵單擊演示，看看我已包括的腳本，歡呼！ **還請注意**我是**不是**那個低估了你的人，所以它肯定是別人，爲了清除空氣'：）' – 2012-07-07 09:03:29

問題是缺少jquery ui庫。 – Markku 2012-07-07 09:22:22

JQuery模態對話框的行爲不如示例

回答

相關問題