jquery Dialog在屏幕上加载时显示它的内容答案

【问题标题】：jquery Dialog display it content on load on the screenjquery Dialog在屏幕上加载时显示它的内容
【发布时间】：2012-10-19 05:43:02
【问题描述】：

嗨，朋友，我正在尝试使用 j-query 创建自定义对话框，在对话框内部我放置了一些文本框和复选框，但问题是当我在按钮单击时显示对话框时，只有对话框内的内容会显示onload，当我单击按钮时，它只会出现在对话框中，也只是第一次，我想要的是它只显示在对话框中而不是onload，我不想让所有组件隐藏/显示每次都显示不/阻止，因为我在对话框中有很多组件。

这是我的代码

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
   <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    /*$(document).ready(function (){
        $('#dialog').append('<input type="checkbox" name="vehicle" value="Car">dfhgdfg</input>');
    });*/
    function call(){
    $(function() {
        $("#dialog").dialog();
        $('p').css({'display':'block'});
    });
}
    </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
    <p style="display:none;">This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <input type="checkbox" name="vehicle" value="Car">test1</input>
    <input type="checkbox" name="vehicle" value="Car">test2</input>
    <input type="checkbox" name="vehicle" value="Car">test3</input>

</div>
 <input type="button" onclick="call();" value="button"></input>

</body>
</html>

【问题讨论】：

你能为此创建一个 jsfiddle 吗？

标签： jquery dialog

【解决方案1】：

将 #dialog div 嵌套在另一个样式为 display: none 的 div 中。然后在#dialog div上初始化对话框插件。

<div style="display: none">
  <div id="dialog" title="Basic dialog">
    <p style="display:none;">This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <input type="checkbox" name="vehicle" value="Car">test1</input>
    <input type="checkbox" name="vehicle" value="Car">test2</input>
    <input type="checkbox" name="vehicle" value="Car">test3</input>

  </div>
</div>

然后，将您的 jQuery 代码更改为以下内容：

$(function() {
    $("#dialog").dialog();
    $('p').css({'display':'block'});
    $('input[type="button"]').on('click', function(){
        $("#dialog").dialog("open");
    })
    .click();  //Since you also want it to open once on page load
});

【讨论】：

【解决方案2】：

只需添加：

$(document).ready(function (){      
    $("#dialog").dialog({ autoOpen: false, modal: true });
});

【讨论】：

【解决方案3】：

你也可以使用：

<div id="dialog" title="Basic dialog">
    <p style="display:none;">This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <input type="checkbox" name="vehicle" value="Car">test1</input>
    <input type="checkbox" name="vehicle" value="Car">test2</input>
    <input type="checkbox" name="vehicle" value="Car">test3</input>
</div>

<button type="button" id="open-dialog">Open</input>

<script> <!-- Put in header or footer -->
    var $Dialog = $('#dialog');
    $Dialog.css('display', 'none').dialog('close');
    $('#open-dialog').on('click', function(){
        $Dialog.dialog();
    })
</script>

【讨论】：