Question

当用户点击主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 code：

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

一旦我开始工作，我将使用真实代码将其移至jsp，但我试图让它首先独立工作。

我见过其他例子，但是我无法通过内容启动对话框。它只会将我重定向到test2.html页面。

有关如何使其发挥作用的任何想法？

Answer 1

试试这个

HTML

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

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

JQUERY

$(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/

Answer 2

我是这样做的：

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

如何使用jQuery使用href从html页面打开内容到另一个html页面的对话框？

2 个答案: