fügen Sie externen Link in meinem Popup Lightbox

Question

In meiner Website möchte ich Google Website in einem Rahmen zeigen, aber hier ist mein Fehler: Abgelehnt, um in einem Rahmen anzuzeigen, weil es "X-Frame-Optionen" auf "SAMEORIGIN"

Also ich möchte den Link in einem Popup-Leuchtkasten zeigen, aber weiß nicht wirklich, wie kann ich das tun !! hier ist mein Pop-up Lightbox Code:

$(document).ready(function() { 
 

 
    var id = '#dialog'; 
 

 
    //Get the screen height and width 
 
    var maskHeight = $(document).height(); 
 
    var maskWidth = $(window).width(); 
 

 
    //Set heigth and width to mask to fill up the whole screen 
 
    $('#mask').css({ 
 
    'width': maskWidth, 
 
    'height': maskHeight 
 
    }); 
 

 
    //transition effect 
 
    $('#mask').fadeIn(500); 
 
    $('#mask').fadeTo("slow", 0.9); 
 

 
    //Get the window height and width 
 
    var winH = $(window).height(); 
 
    var winW = $(window).width(); 
 

 
    //Set the popup window to center 
 
    $(id).css('top', winH/2 - $(id).height()/2); 
 
    $(id).css('left', winW/2 - $(id).width()/2); 
 

 
    //transition effect 
 
    $(id).fadeIn(2000); 
 

 
    //if close button is clicked 
 
    $('.window .close').click(function(e) { 
 
    //Cancel the link behavior 
 
    e.preventDefault(); 
 

 
    $('#mask').hide(); 
 
    $('.window').hide(); 
 
    }); 
 

 
    //if mask is clicked 
 
    $('#mask').click(function() { 
 
    $(this).hide(); 
 
    $('.window').hide(); 
 
    }); 
 

 
});

#mask { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0px; 
 
    width: 100% !important; 
 
    height: 750px !important; 
 
    z-index: 9000; 
 
    background-color: #fff; 
 
    display: none; 
 
} 
 

 
#boxes .window { 
 
    position: absolute; 
 
    left: 0!important; 
 
    top: 0px!important; 
 
    width: 100%; 
 
    height: 750px; 
 
    display: none; 
 
    z-index: 9999; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
#boxes #dialog { 
 
    left: 0!important; 
 
    top: 0px!important; 
 
    width: 100%; 
 
    height: 750px; 
 
    padding: 10px; 
 
    background-color: #ccc; 
 
    font-family: 'Segoe UI Light', sans-serif; 
 
    font-size: 15pt; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="boxes"> 
 
    <div id="dialog" class="window"> 
 
    Your Content Goes Here 
 
    </div> 
 
    <div id="mask"></div> 
 
</div>

benötigen weiteren Text gültig meinen Beitrag hinzufügen, aber alles gesagt !!

Answer 1

Sie können eine verwenden, um den Inhalt von einer externen URL anzuzeigen. Dies funktioniert nicht mit jeder URL, da einige eine X-Frame-Options Einstellung haben, um das Einbetten der Seite in eine zu verbieten. Grundsätzlich haben Sie die HTML-Code Ihrer #dialog zu einem mit dem src Satz an die URL setzen Sie anzeigen möchten, wie:

$(id).html(`<iframe src="https://www.theonion.com/" frameborder="0" width="100%" height="100%" ></iframe>`); 

Hier ist ein Beispiel:

$(document).ready(function() { 
 

 
    var id = '#dialog'; 
 
    
 
    $(id).html(`<iframe src="https://www.theonion.com/" frameborder="0" width="100%" height="100%" ></iframe>`); 
 

 
    //Get the screen height and width 
 
    var maskHeight = $(document).height(); 
 
    var maskWidth = $(window).width(); 
 

 
    //Set heigth and width to mask to fill up the whole screen 
 
    $('#mask').css({ 
 
    'width': maskWidth, 
 
    'height': maskHeight 
 
    }); 
 

 
    //transition effect 
 
    $('#mask').fadeIn(500); 
 
    $('#mask').fadeTo("slow", 0.9); 
 

 
    //Get the window height and width 
 
    var winH = $(window).height(); 
 
    var winW = $(window).width(); 
 

 
    //Set the popup window to center 
 
    $(id).css('top', winH/2 - $(id).height()/2); 
 
    $(id).css('left', winW/2 - $(id).width()/2); 
 

 
    //transition effect 
 
    $(id).fadeIn(2000); 
 

 
    //if close button is clicked 
 
    $('.window .close').click(function(e) { 
 
    //Cancel the link behavior 
 
    e.preventDefault(); 
 

 
    $('#mask').hide(); 
 
    $('.window').hide(); 
 
    }); 
 

 
    //if mask is clicked 
 
    $('#mask').click(function() { 
 
    $(this).hide(); 
 
    $('.window').hide(); 
 
    }); 
 

 
});

#mask { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0px; 
 
    width: 100% !important; 
 
    height: 750px !important; 
 
    z-index: 9000; 
 
    background-color: #fff; 
 
    display: none; 
 
} 
 

 
#boxes .window { 
 
    position: absolute; 
 
    left: 0!important; 
 
    top: 0px!important; 
 
    width: 100%; 
 
    height: 750px; 
 
    display: none; 
 
    z-index: 9999; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
#boxes #dialog { 
 
    left: 0!important; 
 
    top: 0px!important; 
 
    width: 100%; 
 
    height: 750px; 
 
    padding: 10px; 
 
    background-color: #ccc; 
 
    font-family: 'Segoe UI Light', sans-serif; 
 
    font-size: 15pt; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="boxes"> 
 
    <div id="dialog" class="window"> 
 
    
 
    </div> 
 
    <div id="mask"></div> 
 
</div>