Открытая ссылка в всплывающем окне внутри iframe

Question

У меня есть веб-страница со многими ссылками, и я хочу показать любую из этих ссылок во всплывающем окне внутри iframe, поэтому мне не нужно каждый раз переходить на другую страницу, но просто показать и закрыть окно.

Все ссылки на той же странице (другой-page.php) и только (Ид) изменений.

Например:

<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> 
. 
. 
. 

Так что, когда я нажимаю на LINK1, он должен открыть HTML всплывающее окно и показать LINK1 внутри фрейма:

другой-page.php? id = 1

и так далее.

Я ищу решение с использованием чистого JavaScript.

спасибо.

Answer 1

Спасибо за 12 просмотров ...

Лучший способ использует базовый код JavaScript, чтобы захватить ссылку. * я изменю HREF на значение:

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

для Iframe и всплывающее окно я использую:

<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> 

плюс некоторые макияж:

<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> 

и ссылка будет:

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

и последнее, что это 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 --> 

Это все, что вам нужно сделать это.