Question

我有一个包含许多链接的网页，我想在iframe的弹出窗口中显示这些链接，因此我不需要每次都去另一个页面，只需显示并关闭窗口。 / p>

所有链接都针对同一页面（ another-page.php ），只有（ id ）更改。

例如：

<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窗口并在iframe中显示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 -->

这就是你需要做的一切。

在iframe

1 个答案: