0

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.

1

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.