如何使用jQuery在HTML頁面中將內容打開到另一個HTML頁面的對話框中？

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代碼：

<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在HTML頁面中將內容打開到另一個HTML頁面的對話框中？

問題描述

2 個解決方案

解決方案1
1 已采納 2013-10-24 20:48:00

解決方案2
1 2013-10-24 20:54:24

如何使用jQuery在HTML頁面中將內容打開到另一個HTML頁面的對話框中？

問題描述

2 個解決方案

解決方案1 1 已采納 2013-10-24 20:48:00

解決方案2 1 2013-10-24 20:54:24

解決方案1
1 已采納 2013-10-24 20:48:00

解決方案2
1 2013-10-24 20:54:24