Jquery模式不能正常工作

Question

我正在嘗試使用jquery ui模態，但它不能滿足我的需求，即，我想僅在模態內顯示數據，但在此單擊按鈕之前顯示。

 function pop_up() { var dialog, form dialog = $('div#infoDialog').dialog({ autoOpen: false, height: 600, width: 500, modal: true }); $('#showInfos').click(function(e){ e.preventDefault(); dialog.dialog('open'); }); } 

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <button type="button" id="showInfos" onclick="pop_up();">test</button> <div id="infoDialog" title="Eventinfos"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p> </div> 

Answer 1

您的代碼幾乎是正確的，您的代碼中只有一個錯誤，即您將所有javascript代碼與onclick事件綁定，這就是默認顯示模式內容的原因。 所以現在你只需要刪除onclick事件和pop_up（）函數。 所以你的最終代碼如下所示。

 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> <button type="button" id="showInfos" >test</button> <div id="infoDialog" title="Eventinfos"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p> </div> <script> // function pop_up() // { var dialog, form dialog = $('div#infoDialog').dialog({ autoOpen: false, height: 600, width: 500, modal: true }); $('#showInfos').click(function(e){ e.preventDefault(); dialog.dialog('open'); }); // } </script> 

Answer 2

最好使用DOM ready事件在頁面加載時設置模態:(更多信息： https ： //learn.jquery.com/using-jquery-core/document-ready/ ）

$(document).ready(function(){
    $('div#infoDialog').dialog({
       autoOpen: false, // this should be false unless you want it opened from the start
       height: 600,
       width: 500,
       modal: true
    });

    //now let's bind the click event:
    $('#showInfos').click(function(){
       $('div#infoDialog').dialog('open');
    });
})

你的html現在變成了，注意按鈕上沒有onclick="" 。

<button type="button" id="showInfos">test</button>
    <div id="infoDialog" title="Eventinfos">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
    </div>

小提琴： https ： //jsfiddle.net/4hxd5tLL/1/