Javascript jquery模式不工作_Javascript_Jquery_Html_Modal Dialog

Javascript jquery模式不工作

javascript jquery html

Javascript jquery模式不工作,javascript,jquery,html,modal-dialog,Javascript,Jquery,Html,Modal Dialog,代码在同一页时jquery模式工作 index.jsp <script> function show() { $(function() { $( "#dialog:ui-dialog" ).dialog( "destroy" ); $( "#dialog-modal" ).dialog({ height: 140, modal: true }); });

代码在同一页时jquery模式工作

index.jsp

<script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
<div id="dialog-modal" title="Demo" style="display:none">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

   <script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "/dialog.jsp#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
</body>

<div id="#dialog-modal" title="Demo">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>


函数show（）
{
$（函数（）{
$（“#dialog:ui dialog”）.dialog（“销毁”）；
$（“#对话框模式”）.dialog({
身高：140，
莫代尔：对
});
});
}
添加模式覆盖屏幕使对话框看起来更加突出，因为它使页面内容变暗

但是，当我试图在不同的文件中分离上述代码时，它不会显示出来

index.jsp

<script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
<div id="dialog-modal" title="Demo" style="display:none">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

   <script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "/dialog.jsp#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
</body>

<div id="#dialog-modal" title="Demo">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>


函数show（）
{
$（函数（）{
$（“#dialog:ui dialog”）.dialog（“销毁”）；
$（“/dialog.jsp#dialog modal”）.dialog({
身高：140，
莫代尔：对
});
});
}

dialog.jsp

<script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
<div id="dialog-modal" title="Demo" style="display:none">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

   <script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "/dialog.jsp#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
</body>

<div id="#dialog-modal" title="Demo">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>


添加模式覆盖屏幕使对话框看起来更加突出，因为它使页面内容变暗

提前谢谢

这根本行不通；jQuery不会仅仅因为您使用该选择器引用它就为您加载另一个页面片段；它甚至不是有效的选择器语法

如果要从另一个文件加载该对话框，则必须执行

以将其包含在服务器端，或者进行显式ajax调用（使用jQuery

.load（）

或

或.ajax（）
或其他方式）当发生使您希望显示对话框的事件时。
这是因为dom中没有id为“dialog modal”的元素。您的选择器不正确。请对jquery选择器结果进行控制台日志记录，您将看到它是空的。请确保将中的元素加载到dom中。您还可以动态创建它：
$('<div id="my-popup">').dialog({
 height: 140,
 modal: true
});

$（''）。对话框({
身高：140，
莫代尔：对
});
您不能在jQuery选择器中调用外部资源，如$（“/dialog.jsp#…”）
。您需要使用AJAX调用加载资源
首先，将一个节点添加到主HTML以接收它。我已添加了
。然后在该节点上加载.dialog（）
：
   <script>
    function show()
    {
      $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-content" ).dialog({
            height: 140,
            modal: true,
            // Use load function to populate the dialog:
            load: function() {
              $("#dialog-content").load("/dialog.jsp#dialog-modal")
            }
        });
      });
    }

    </script>
</head>
<body>
<div id='dialog-content'></div>
<input type="button" value="Demo" onClick="show()" >
</body>


函数show（）
{
$（函数（）{
$（“#dialog:ui dialog”）.dialog（“销毁”）；
$（“#对话框内容”）.dialog({
身高：140，
莫代尔：是的，
//使用加载功能填充对话框：
加载：函数（）{
$（“#对话内容”）.load（“/dialog.jsp#对话模式”）
}
});
});
}
向jQuery选择器添加“路径”不会将javascript放在单独的文件中，而且我认为我还没有看到将HMTL标记放在单独的文件中的成功应用
将标记移回index.jsp，并将show（）
函数移到单独的.js（而不是.jsp）文件中
将新的.js文件链接到index.jsp：
<script type="text/javascript" src="/show.js"></script

“它不工作“这不是一个非常描述性的问题解释。请说得更准确些，我是说。。它没有像我说的那样显示对话框，如果您想在最初处理JSP时合并页面片段，或者使用ajax。您还没有提供足够的信息来说明更具体的内容。@sql\u查询现在可以工作了，如何工作？它在做什么或不做什么？另外，请确保您有我的最新版本，因为我对它进行了多次编辑。$（“#dialog content”）.load（/“dialog.jsp#dialog modal”）在代码中发现问题，应该是$（“#dialog content”）.load（“/dialog.jsp#dialog modal”）。现在，我更正了它，但问题是dialog.jsp的内容没有显示在对话框中。为什么？