Question

当代码在同一页面时，

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>

但是，当我试图在不同的文件中分离上面的代码时，它没有显示

的index.jsp

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

dialog.jsp

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

提前感谢!!

Answer 1

您无法在$("/dialog.jsp#...")之类的jQuery选择器中调用外部资源。相反，您需要使用AJAX调用加载资源。

首先，在主HTML中添加一个节点以接收它。我添加了<div id='dialog-content'></div>。然后在该节点上加载.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>

Answer 2

这根本不起作用; jQuery不会为你加载其他页面片段只是因为你用那个选择器引用它;它甚至不是有效的选择器语法。

如果要从另一个文件加载对话框，则必须执行<jsp:include>将其包含在服务器端，或者进行显式的ajax调用（使用jQuery .load()或{ {1}}或其他什么）当某些事情发生时，你想要显示对话框。

Answer 3

那是因为dom中没有id为“dialog-modal”的元素。你的选择器不正确。执行你的jquery选择器结果的控制台日志，你会看到它是空的。确保元素在加载dom。你也可以动态创建它：

$('<div id="my-popup">').dialog({
 height: 140,
 modal: true
});

Answer 4

向jQuery选择器添加“路径”并不会将javascript放在单独的文件中，我认为我没有看到成功使用将HMTL标记放在单独的文件中。

将标记移回index.jsp并将show()函数移动到单独的.js（非.jsp）文件中。

将新的.js文件链接到index.jsp：

<script type="text/javascript" src="/show.js"></script

jquery模态不起作用

4 个答案: