Javascript 为什么jquery没有'；在对话框中不显示我的div？_Javascript_Jquery_Html_Css

Javascript 为什么jquery没有'；在对话框中不显示我的div？

javascript jquery html css

Javascript 为什么jquery没有'；在对话框中不显示我的div？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试着继续学习如何打开一个模态对话框。代码是这样的 <!doctype html> <html> <meta charset="utf-8"> <title>Basic usage of the jQuery UI dialog</title> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs

我试着继续学习如何打开一个模态对话框。代码是这样的

<!doctype html>
<html>
    <meta charset="utf-8">
    <title>Basic usage of the jQuery UI dialog</title>

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var $dialog = $('<div></div>')
            .html('This dialog will show every time!')
            .dialog({
                autoOpen: false,
                title: 'Basic Dialog'
            });

        $('#opener').click(function() {
            $dialog.dialog('open');
            // prevent the default action, e.g., following a link
            return false;
        });
    });
    </script>
</head>
<body>

<p>This is an example from the Nemikor Blog article <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/">Basic usage of the jQuery UI dialog</a>.</p>

<button id="opener">Open the dialog</button>

</body>
</html>

不幸的是，没有打开任何对话框。然而，当我将

modal

div设置为默认显示，注释掉上面代码中的

对话框

调用并取消对

css

调用的注释时，jquery成功地识别了

modal

类，并在我的div周围绘制了一个3像素的红色实心边框

我的问题是：为什么jquery没有像我最初尝试的那样在对话框中显示（清晰可识别的）

div
，既然加载页面时
不可见，您需要使用.on（）方法并将事件绑定到
的父级
试试像这样的东西
$('body').on('click','.modal',function(){
//your code here
});

您有两个不同的对话框调用。在第一次通话中，您设置了一些参数。在第二次通话中，您没有
我建议删除内联样式属性（因为这会使它保持隐藏状态），并为对话框添加一个参数。就像你的工作示例一样
<!-- Removed the inline style -->
<div class="modal" title="Testing the Modal Code">
  <h1>Test</h1>
</div>

//-- Adding this
$('.modal').dialog({
    autoOpen: false
});

//-- Using the same call
$('#opener').click(function() {
    $(".modal").dialog('open');
    //$('.modal').css( "border", "3px solid red" );
});


试验
//--加上这个
$（'.modal'）。对话框({
自动打开：错误
});
//--使用相同的呼叫
$（'#opener'）。单击（函数（）{
$（“.modal”）.dialog（'open'）；
//$（'.modal'）.css（“边框”，“3px实心红色”）；
});

这将提供您想要的结果
$(".modal").dialog();

是您要查找的内容
对话框将打开：
$（“.modal”）.dialog（）
这里有一个例子：你完全正确。我已经看到了，我只是没有幻想去尝试它。谢谢！：）
<!-- Removed the inline style -->
<div class="modal" title="Testing the Modal Code">
  <h1>Test</h1>
</div>

//-- Adding this
$('.modal').dialog({
    autoOpen: false
});

//-- Using the same call
$('#opener').click(function() {
    $(".modal").dialog('open');
    //$('.modal').css( "border", "3px solid red" );
});

$(".modal").dialog();