-1

hi friend i am trying to create custom dialog using j-query and inside dialog i am putting some text box and check box , but the problem is when i am displaying dialog box on button click , only the content inside the dialog will display onload and when i click on buttton it will appear in dialog only that too only first time only, what i want is it only display in dialog not onload ,and i dont want to make all component hide/show display none/block every time ,because i have many component in dialog.

here is my code

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

3 回答 3

2

#dialog将您的 div嵌套在另一个具有 style 的 div 中display: none。#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
});
于 2012-10-19T06:19:52.940 回答
0

您也可以使用：

<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>
于 2012-10-19T06:40:11.983 回答
0

只需添加以下内容：

$(document).ready(function (){      
    $("#dialog").dialog({ autoOpen: false, modal: true });
});
于 2012-10-19T06:32:33.903 回答