पॉपअप div में iframe सामग्री को कैसे लोड करें?

Question

पॉपअप div में iframe सामग्री को कैसे लोड करें। पॉपअप div प्रत्येक लिंक से प्रत्येक लिंक के क्लिक पर खुल जाएगा, पृष्ठ यूआरएल पॉपअप div के अंदर iframe href पर लोड होगा।

$(document).ready(function(){ 
    $(".openpop").click(function(){ 
    var x = $(this).attr('href'); 
    alert(x); 
    y = x.replace('#', ''); 
    alert(y); 
    $(".popup").toggle(); 
    $("iframe").attr("href", y); 

    }); 

    $(".close").click(function(){ 
    $(this).parent().fadeOut("slow"); 
    }); 

}); 

एचटीएमएल

<a class="openpop" href="#http://www.google.com">Link 1</a> 
<a class="openpop" href="#http://www.yahoo.com">Link 2</a> 
<a class="openpop" href="#http://www.w3schools.com">Link 3</a> 
<div class="wrapper"> 
<div class="popup"> 
<iframe src=""> 
    <p>Your browser does not support iframes.</p> 
</iframe> 
<a href="#" class="close">X</a></div> 
</div> 

Answer 1

सबसे पहले, आप कड़ी में # जरूरत नहीं है। निष्पादन से लिंक को रोकने के लिए बस e.preventDefault(); पर कॉल करें।

सुरक्षा कारणों से आप प्रत्येक लिंक जैसे नहीं खोल सकते हैं। गूगल।

इसके अलावा, आप टॉगल का उपयोग नहीं कर सकते हैं क्योंकि आप allways इसे क्लिक करने के लिए दो बार करता है, तो एक फ्रेम पहले से ही opend है।

यहाँ एक working fiddle

एचटीएमएल

<div class="links"> 
    <a class="openpop" href="http://getbootstrap.com/">Link 1</a> 
    <a class="openpop" href="http://www.jsfiddle.net">Link 2</a> 
    <a class="openpop" href="http://www.w3schools.com">Link 3</a> 
</div> 
<div class="wrapper"> 
    <div class="popup"> 
     <iframe src=""> 
      <p>Your browser does not support iframes.</p> 
     </iframe> 
<a href="#" class="close">X</a> 
    </div> 
</div> 

jQuery

$(document).ready(function() { 
    $(".popup").hide(); 
    $(".openpop").click(function (e) { 
     e.preventDefault(); 
     $("iframe").attr("src", $(this).attr('href')); 
     $(".links").fadeOut('slow'); 
     $(".popup").fadeIn('slow'); 
    }); 

    $(".close").click(function() { 
     $(this).parent().fadeOut("slow"); 
     $(".links").fadeIn("slow"); 
    }); 
}); 

निश्चित रूप से

है आप बेहतर दृश्य अनुभव :)

Answer 2

<script> 

    $(document).ready(function(){ 
    $(".openpop").click(function(){ 
    var x = $(this).attr('href'); 
    y = x.replace('#', ''); 
    $(".popup").show().html('<iframe src="'+y+'"></iframe>'); 
    $("iframe").attr("href", y); 


    }); 

    $(".close").click(function(){ 
    $(this).parent().fadeOut("slow"); 
    }); 

}); 

    </script> 

के लिए स्टाइल में कुछ बदलाव करना है

आप iframe में गूगल और याहू को नहीं खोल सकता दोनों साइट के लिए इसका कृपया इस लिंक Why Iframe dosen't work for yahoo.com

देखने की अनुमति नहीं है, लेकिन आप इस कोड के साथ w3school खोल सकते हैं

Answer 3

इस

उपयोग कर सकते हैं

$('#clickme').click(function(){ 
    $('#showDiv').show(); 
    $('#iframe').attr('src','your url'); 
});