如何使用jQuery使用href從另一個html頁面打開html頁面中的內容到對話框？

我試圖從html頁面獲取內容以在用戶單擊主html頁面時加載到jQuery ui對話框中。然而，雖然這看起來很簡單，但它不起作用。如何使用jQuery使用href從另一個html頁面打開html頁面中的內容到對話框？

這裏是我的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頁面。

關於如何使這項工作的任何想法？

來源

2013-10-24 James Drinkard

您是否在瀏覽器控制檯中看到與此「對話框」相關的任何javascript錯誤？ – SRy

你可以附加一個ID到一個標籤，並使用它作爲選擇器？ Click Here!然後使用$（'＃test'）。on（'event'，'function（）{...}'） – jonosma

我在螢幕控制檯中看不到任何錯誤。這是我檢查的第一件事。我試着在錨標籤上使用一個id，但我沒有看到任何區別。我可以再試一次。 –

試試這個

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/

來源

2013-10-24 20:48:00 Manish

感謝您的幫助！我有類似的代碼片段，但無法完成它的工作。 –

這裏是我如何做到這一點：

<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-24 20:54:24

我應該提到我不喜歡使用iFrames解決方案。只作爲最後的手段。 –

沒問題，很高興你找到了你需要的答案。 –

這是一個備份解決方案，但它也很好！ –

如何使用jQuery使用href從另一個html頁面打開html頁面中的內容到對話框？

回答

相關問題