Question

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

Answer 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
});

Answer 2

只需添加：

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

Answer 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>

jquery Dialog在屏幕上显示加载内容

3 个答案: