Jquery模式无法正常工作

Posted 2023-05-08

【中文标题】Jquery模式无法正常工作

【英文标题】：Jquery modal not working properly

【发布时间】：2018-07-22 05:09:34

【问题描述】：

我正在尝试使用 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>

【问题讨论】：

autoOpen: true, 应该是：autoOpen: false, 吗？否则它会在加载后立即打开。

没有变化。同样的问题

【参考方案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>

【参考方案2】：

最好在页面加载时使用 DOM 就绪事件设置模态： （更多信息：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/