1

当用户单击主 html 页面时，我试图从 html 页面获取内容以加载到 jQuery ui 对话框中。然而，虽然这看起来很简单，但它不起作用。

这是我的 jQuery 代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$('#modal' ).dialog({ modal : true });

$(function() {
     $('a[name=Test]').on('click', function(e){
     $('#modal').load(this.href).dialog('open');
  });
});
</script>
</head>

HTML 代码：

<body>
    <p><a name="Test" href="test/test2.html">Click Here!</a></p>
</body>

一旦我得到这个工作，我会用真正的代码将它移动到jsp，但我试图让它首先独立工作。

我已经看过其他示例，但我无法使用它来启动包含内容的对话框。它只会将我重定向到 test2.html 页面。

关于如何让它发挥作用的任何想法？

4

2 回答 2

1

尝试这个

HTML

<p><a name="Test" href="test/test2.html">Click Here!</a></p>

<div id="modal"></div>

查询

$(function() {
     $('a[name=Test]').on('click', function(e){
         e.preventDefault(); //stops from going to test2.html
         $('#modal').load(this.href).dialog({ modal : true });
  });
});

小提琴http://jsfiddle.net/becLJ/

于 2013-10-24T20:48:00.697 回答
1

这是我的做法：

<html>
    <head>
        <script src="Scripts/Global/jquery-1.10.2.js"></script>
        <script src="Scripts/Global/jquery-ui-1.10.2.js"></script>
       <script>
            function openDialog() {
                (function () {
                    $('#dialog').dialog({
                        modal: true,
                        resizable: false,
                        draggable: false,
                        width: '1100',
                        height: '900',
                        title: 'Sample Dialog'
                    });
                })();
            }
        </script>
    </head>
    <body>
        <div id="dialog" style="display:none;"><iframe style="width:98%;height:98%;" id="modalDialogBox" src="dialogPage.htm"></iframe></div>
        <a onclick="openDialog()">Click Me</a>
    </body>
</html>
于 2013-10-24T20:54:24.693 回答