Home » Jquery » jquery – How to open URL in modal popup?

jquery – How to open URL in modal popup?

Posted by: admin February 22, 2020 Leave a comment

Questions:

I am trying to open an URL link in modal popup.
for that I tried

<a href="https://www.google.com/" class="test">Google</a><br>

<div id="somediv" title="this is a dialog" style="display:none;">
    <iframe id="thedialog" width="350" height="350"></iframe>
</div>
$(document).ready(function () {
    $(".test").click(function () {
        $("#thedialog").attr('src', $(this).attr("href"));
        $("#somediv").dialog({
            width: 400,
            height: 450,
            modal: true,
            close: function () {
                $("#thedialog").attr('src', "about:blank");
            }
        });
        return false;
    });
});

but it is not opening an URL and showing error in console as

Refused to display ‘https://www.google.com/‘ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

I have also tried some other approaches as like

Loading div

$( "#welcomeModal" ).load( "https://www.google.com/" )

it has error as

Access to XMLHttpRequest at 'https://www.google.com/' from origin 'http://localhost:53636' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

tried embed

<embed src="https://www.google.com/" frameborder="0" width="100%" height="400px">

tried object control

    <div class="modal-body">
                     <object data="https://www.google.com/" width="400" height="300" type="text/html">
    Alternative Content
</object>
How to&Answer: