在模态中的div内打开一个链接

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (26)

我有一个模态,其中有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">&times;</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>

但链接在同一个标​​签中打开...

UPDATE

我也尝试了这个答案,但在评论之后它对我也没有用。

提问于
用户回答回答于

回答你的评论

如果你在运行JSFiddle时检查控制台它说,

拒绝在框架中显示“ 在模式中的div内打开链接 ”,因为祖先违反了以下内容安全策略指令:“frame-ancestors'self'”。

意思是,

IFRAME由于设置了内容安全策略,禁止在内容中显示内容。托管stackoverflow.com的Web服务器配置为将HTTP标头添加到响应对象。具体来说,他们将Content-Security-Policy标记设置为frame-ancestors'self'。你无法使用IFRAME将他们的页面嵌入到你自己的页面中。

感谢TimmyB的回答

回答你的问题

学习者的答案也是一个不错的选择。(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">&times;</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>

热门问答

在serverless中,我能否自己host 一个express(nodejs)的服务?

Tina

腾讯云 · 产品经理 (已认证)

Go Serverless!
推荐
您好,可以这样的。您可以参考如下文档,申请下http function 您可以使用常见的 WEB 框架(如 Nodejs Web 框架:Express、Koa)编写 HTTP 函数。而 WEB 框架内置的一些中间件(如cors)也会极大的方便您的业务编写 文档链接 https:...... 展开详请

使用有过期时间的签名往Cos存储桶中上传文件,若上传还在进行中签名过期,上传是否会终止?

galenye

腾讯 · 工程师 (已认证)

对象存储专业搬砖工
推荐已采纳

如果你是使用的简单上传,它能接收5g以内的文件,那签名过期的文件还在上传的话,是没影响的,因为签名判断是在cos接受到请求时。

如果你是使用的sdk等封装的分片上传,那其实是多个请求去上传文件,如果签名过期了,那上传到某一刻,后面的请求都会返回403

存储桶的默认加速域名 cdn 如何更改业务类型, 即把静态加速改成下载加速?

Jinqn

腾讯 · 高级工程师 (已认证)

腾讯云COS前端开发
推荐

我理解你意思是,浏览器打开的时候要下载,不要直接显示。

通过存储桶的文件 Content-Type 来控制

为何我使用.Net API 生成的临时密钥无法进行文件操作?

推荐
cos有自己的密钥系统,应该是在控制台上,访问管理,API密钥,项目密钥那里,或者去看看cos的文档是如何说明的吧。 你通过ms接口创建cos临时密钥,也许的确会被限制一些,这个需要ms这个产品的人回答下比较好。 生成临时密钥和哪个SDK无关,可以直接在线调用也可以生成,通过AP...... 展开详请

tencentcloud-sdk-php-master github代码上没有vendor文件夹?

推荐
因为和composer冲突,因此导出时没有包含vendor目录。如果需要,可以考虑git clone方式拿到,或者到https://cloud.tencent.com/document/sdk/PHP#.E9.80.9A.E8.BF.87.E6.BA.90.E7.A0.81.E5...... 展开详请

织云安装包在哪里下载?

使用织云,必须要满足1、2步骤1、机器要同步到c.isd.com系统。简单讲,就是在c.isd.com上有这台机器(如果c.isd.com没有,而公司的cmdb【cmdb.oa.com】有,则需要同步到c.isd.com即可,同步需要联系zhiyunhelper同步,而没有的话,...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券