在模式中打开div中的链接
在模式中打开div中的链接
提问于 2019-06-09 17:12:00
我有一个模式，其中有2个<a>标签。当用户单击链接时，链接应该在相同模式的相同div中打开，并且不在选项卡中的中打开。
为此，我尝试了：
$(document).ready(function() {
$("#help_modal a").each(function() {
$("#help_modal").load($(this).attr("href"));
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="help_modal">
<a href="https://google.com" class="btn btn-block btn-lg btn-primary">Open Google</a>
<a href="https://stackoverflow.com" class="btn btn-block btn-lg btn-secondary">Open Stackoverflow</a>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
但链接是在同一个选项卡中打开的.
更新
我也尝试过this answer，但在使用this comment之后，它对我也不起作用。
回答 1
Stack Overflow用户
发布于 2019-06-09 18:09:36
我设法用一些javascript和html 'object‘标记实现了你想要的东西：
我用toReplace变量的内容替换了模态主体的内容，该变量包含一个html 'object‘元素，用于嵌入外部链接。
let el = document.getElementById("test");
let elToReplace = document.getElementById("help_modal");
let toReplace = "<object type=\"text/html\" data=\"https://gnu.org/\" width=\"100%\" height=\"600px\" style=\"overflow:auto;border:5px ridge blue\"> </object>";
function replaceInner() {
elToReplace.innerHTML = toReplace;
}
el.addEventListener("click", () => { replaceInner(); }, false);在这里查看一个可用的代码：https://codepen.io/marc-simplon/pen/WBVmYW
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56513343
复制相关文章
相似问题