JQuery: क्या मैं बाहरी वेब पेज खोलने के लिए एक संवाद का उपयोग कर सकता हूं?

Question

क्या मैं एक बाहरी वेब पेज खोलने के लिए JQuery Dialog का उपयोग कर सकता हूं, और यदि ऐसा है - कैसे?

अनिवार्य रूप से, मैं JQuery का उपयोग कर लाइटविंडो की क्षमताओं को दोहराना चाहता हूं (लाइटविंडो स्क्रिप्टिव पर आधारित है)।

www.stickmanlabs.com/lightwindow/index.html

आदर्श रूप में, मैं कुछ JQuery कोर के अलावा है कि उपयोग करना चाहते हैं। यदि इसे एक JQuery प्लग-इन होने की आवश्यकता है, तो यह ठीक है लेकिन मैं वास्तव में ऐसी सुविधाओं की मूल कार्यक्षमता के अलावा होना चाहता हूं जो पहले से मौजूद है।

Answer 1

JQueryUI में आप एक संवाद के रूप में एक डीआईवी का उपयोग कर रहे हैं।

$(function() { 
    $("#dialog").dialog(); 
}); 

तो तुम DIV के अंदर एक आइफ्रेम उपयोग कर सकते हैं:

<div id="dialog" title="Google"> 
    <IFRAME style="border: 0px;" SRC="http://www.google.com" width="100%" height = "100%" > 
</div> 

संपादित करें:

आप चाहते हैं अपने पृष्ठ में हर लिंक jQueryUI संवाद को यहां प्रदर्शित किया जा सके यह है:

जावास्क्रिप्ट:

$("a").click(function(event){ 
    event.preventDefault(); 
    $("#frame").attr("src", $(this).attr("href")); 
    $('#dialog').dialog('open'); 
}); 

एचटीएमएल:

<div id="dialog" title="Dialog Title"> 
    <IFRAME id="frame" style="border: 0px;" SRC="" width="100%" height = "100%" > 
</div> 

Answer 2

बस JCasso's great answer पर विस्तार करने के लिए, आप सभी जावास्क्रिप्ट में इस संभाल कर सकते हैं:

$("a").click(function (event) { 
    event.preventDefault(); 
    var page = $(this).attr("href"); 
    var title = $(this).text(); 
    $('<div></div>') 
     .html('<iframe style="border: 0px; " src="' + page + 
       '" width="100%" height="100%"></iframe>') 
     .dialog({ 
      autoOpen: true, 
      modal: true, 
      height: 800, 
      width: 400, 
      title: title 
    }); 
}); 

अब पृष्ठ पर किसी लिंक होगा बॉक्स में iframe के अंदर खोला जाए।

Working Demo in jsFiddle