CODEWITHSUNDEEP
javascripthtmliframe
sadssdsada
sadssdsada

Reputation: 43

Open link in a popup window inside an iframe

I have a webpage with many links and I want to show any of these links in a popup window inside an iframe so I don't need to go every time to another page but simply show and close the window.

All links are for the same page ( another-page.php ) and only the ( id ) changes.

For example:

<a href="another-page.php?id=1">Link1</a>
<a href="another-page.php?id=2">Link2</a>
<a href="another-page.php?id=3">Link3</a>
.
.
.

So when I click on Link1, it should open a popup html window and show the Link1 inside the iframe:

another-page.php?id=1

and so on.

I'm searching for a solution using pure JavaScript.

Thank you.

Upvotes: 0

Views: 6261

Answers (1)

sadssdsada
sadssdsada

Reputation: 43

Thanks for the 12 views...

The best way is using a basic JavaScript code to grab the link. * I change the href to value:

<script>
    function doalert(obj) {
        var el = document.getElementById('here').src = (obj.getAttribute("value"));
     ;
        return false;
    }
</script>

for the Iframe and the popup window I use:

<script>
var modal = document.getElementById('modinfo');
var span = document.getElementsByClassName("close")[0]; 
function test() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

plus some makeup:

<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>

and the link will be:

<a onclick="doalert(this);test()" value="another-page?id=1">Link1</a>

and last thing is the html:

<!-- Modal -->
<div id="modinfo" class="modal" style="display: none;">
  <!-- Modal content -->
  <div style="margin: 0 auto; width: 80%;background: white;border: none; border-radius: 0">
    <span class="remove" style="cursor:pointer;color: #3D5872; font-size: 26px">x</span>
    <iframe id="here" src="" style="width: 100%; height: 310px;border: none;"></iframe>
  </div>
<!-- Modal content -->
</div>
<!-- Modal -->

This is all what you need to make it.

Upvotes: 1

Related Questions