我有一个模态,其中有 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 之后它对我也不起作用.
最佳答案
回答您的comment :
如果您在运行 JSFiddle 时检查控制台它说,
Refused to display 'Opening a link inside a div in the modal' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
这意味着,
由于设置了内容安全策略,内容被禁止在 IFRAME 内显示。托管 stackoverflow.com 的 Web 服务器配置为向响应对象添加 HTTP header 。具体来说,他们将 Content-Security-Policy 标签设置为框架祖先“self”。您无法使用 IFRAME 将他们的页面嵌入到您自己的页面中。
感谢TimmyB's answer .
<小时/>回答您的question :
<强> Learner's answer也是一个不错的选择。 (+1)
但我更喜欢有不同的iframe并通过按钮显示它们。
$(document).ready(function() {
$(".modal_button_example_com_self").click(function() {
$('.modal_button_self').hide();
$('#example_com').attr("style", "");
});
$(".modal_button_example_net_self").click(function() {
$('.modal_button_self').hide();
$('#example_net').attr("style", "");
});
$(".close_self").click(function() {
$('.modal_button_self').attr("style", "");
$('#example_com').hide();
$('#example_net').hide();
});
});
<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 close_self" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="help_modal">
<button class="modal_button_self modal_button_example_com_self btn btn-block btn-lg btn-primary">Open Example.com</button>
<button class="modal_button_self modal_button_example_net_self btn btn-block btn-lg btn-secondary">Open Example.net</button>
<iframe id="example_com" style="display: none;" src="https://example.com/" width="100%" height="50%" seamless></iframe>
<iframe id="example_net" style="display: none;" src="https://example.net/" width="100%" height="50%" seamless></iframe>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger close_self" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
关于jquery - 在模态中打开 div 内的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56513343/