Opening an External Website in a Modal Popup

Opening an external website in a modal popup

The root cause is page.onclick is registered after popup window is open at the first time, then the following 'open popup' will trigger a.onclick and page.onclick in a row, that caused the popup window is open then is closed directly.

The simple solution is add one parameter to control the state of the popup. if the popup is closed, do nothing in page.onclick.

To remove setTimeout, there are two solution:

1. added another parameter to control the state of the popup initialization.

2. Don't make <div id="page"> is the parent of <a id="popup">, so <a id="popup"> will not be triggered when clicked <div id="page">.

Below are two solutions:

I prefer the Solution2, it is better decoupling than
Solution1, every component foucs on its own jobs.

Solution 1: added isInit as the indicator if the popup already finished initialization.

PS: In the comment, you mentioned close the popup only when click on <div id="page">, to implement this in solution1, I think you have to bind the event =mouseout, mouseenter to judge where the mouse clicks.

document.getElementById("a").onclick = function(e) {  e.preventDefault();  var isInit = true; // indicates if the popup already been initialized.  var isClosed = false; // indicates the state of the popup  document.getElementById("popup").style.display = "block";  document.getElementById('iframe').src = "http://example.com";  document.getElementById('page').className = "darken";  document.getElementById('page').onclick = function() {    if(isInit){isInit=false;return;}    if(isClosed){return;} //if the popup is closed, do nothing.    document.getElementById("popup").style.display = "none";    document.getElementById('page').className = "";    isClosed=true;  }  return false;}

#popup {   display: none;   border: 1px black solid;  width: 400px; height: 200px;   top:20px; left:20px;  background-color: white;  z-index: 10;  padding: 2em;  position: fixed;}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }

<div id="page">  <a href="" id="a">Click me</a><br>  Hello<br>  Hello<br>
  <div id="popup">   External website:  <iframe id="iframe"></iframe>  </div>
</div>

How to open another page in pop up modal on click of hyperlink

If the content you want to display is on an other site the only way is to use iframes. So you would have your modal with the iframe inside it pointing to the external source and being set invisible. When clicking on the link, a Javascript Eventlistener would set the modal visible (i.e. manipulate CSS display). The href attribut of the link is empty.

But using iframes ist kind a out of date. Instead modern Web Apps use Rest Endpoints to request the data in a format like json, parse it and render the data within your App.

open modal popup on external link

I used the latest version of jquery and swal. But should be pretty much the same.

$(function() {
  var allLinks = $("a").filter(function() {
    return this.hostname && this.hostname !== location.hostname;
  }).click(function(e) {
    e.preventDefault();
    swal({
      title: "Are you sure?",
      text: "You are about to open an external url.",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    })
    .then((result) => {
      if (result) {
        // document.location.href = this.href; // if you want it to open in same window
        window.open(this.href); // will open it in new window
      }
    });
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<a href="https://google.com">Go to Google</a> - 
<a href="https://stackoverflow.com">Go to Stackoverflow</a> - 
<a href="test.html">Internal Link (Broken)</a>

How to pop up external link in bootstrap modal

Try this solution. I think this code solve your problem.

For display of new link use <iframe> tag and add your site URL by using src path.

Bootstrap Model

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="wrapper">  <div class="container">    <!-- Button trigger modal -->    <button      type="button"      class="btn btn-primary"      data-toggle="modal"      data-target="#exampleModal"    >      Launch demo modal    </button>
    <!-- Modal -->    <div      class="modal fade"      id="exampleModal"      tabindex="-1"      role="dialog"      aria-labelledby="exampleModalLabel"      aria-hidden="true"    >      <div class="modal-dialog" role="document">        <div class="modal-content">          <div class="modal-header">            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>            <button              type="button"              class="close"              data-dismiss="modal"              aria-label="Close"            >              <span aria-hidden="true">×</span>            </button>          </div>          <div class="modal-body">            <iframe              src="https://getbootstrap.com/"              name="myIframe"              class="w-100 h-100"            ></iframe>          </div>          <div class="modal-footer">            <button              type="button"              class="btn btn-secondary"              data-dismiss="modal"            >              Close            </button>            <button type="button" class="btn btn-primary">Save changes</button>          </div>        </div>      </div>    </div>  </div></div>

Open modal web page from another web page

The following code will solve your problem,

<a href="http://wikipedia.com/" class="test">comment #1</a><br>
<a href="http://ebay.com/" class="test">comment #2</a><br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
    <iframe id="thedialog" width="350" height="350"></iframe>
</div>

<script>
    $(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;
        });
    });
</script>

Also check the JSFiddle example http://jsfiddle.net/qp7NP/.

---

Related Topics