jquery对话框在屏幕上显示加载时的it内容_Jquery_Dialog

jquery对话框在屏幕上显示加载时的it内容

jquery

jquery对话框在屏幕上显示加载时的it内容,jquery,dialog,Jquery,Dialog,嗨，朋友，我正在尝试使用j-query和inside dialog创建自定义对话框我正在放置一些文本框和复选框，但问题是当我单击按钮显示对话框时，只有对话框内的内容将显示为onload，当我单击button时，它将仅第一次出现在对话框中，我想要的是它只显示在对话框中而不是加载，我不想每次都让所有组件隐藏/显示无/块，因为我在对话框中有许多组件这是我的密码 <!doctype html> <html lang="en"> <head> <met

嗨，朋友，我正在尝试使用j-query和inside dialog创建自定义对话框我正在放置一些文本框和复选框，但问题是当我单击按钮显示对话框时，只有对话框内的内容将显示为onload，当我单击button时，它将仅第一次出现在对话框中，我想要的是它只显示在对话框中而不是加载，我不想每次都让所有组件隐藏/显示无/块，因为我在对话框中有许多组件

这是我的密码

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

将对话框div嵌套在另一个div中，样式显示为：none。然后在dialog div上初始化dialog插件

只需添加以下内容：

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

您还可以使用：

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

您可以为此创建一个JSFIDLE吗？

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

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