在新选项卡中打开引导模式 [英] Open bootstrap modal in new tab

查看：21
本文介绍了在新选项卡中打开引导模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在单击鼠标中键(或者只需在项目上单击鼠标右键，然后在新标签页中打开bootstrap modal点击在新标签页中打开")?

预期行为:

用户可以通过在项目上单击鼠标左键在同一选项卡中打开模式.用户也可以点击鼠标中键(滚动条)在新标签页中打开模态.

我可以做类似的事情(下面的链接)，但我无法使用 modal 处理大小写，是否甚至可以以某种方式将 modal 传递给新选项卡?

JSFiddle:http://jsfiddle.net/vqxf7zyk/1/

(而不是重定向到谷歌，标签中应该有新的模式)

解决方案(基于 @RohitSharma 答案):

http://jsfiddle.net/vqxf7zyk/10/

解决方案

你可以使用它.它工作正常.

$(document).ready(function() {$('.btn-info.btn-lg').mousedown(function(event) {如果(事件.which == 2){event.preventDefault();window.open(document.URL + '#myModal', '');}});$(window).load(function() {$(window.location.hash).modal("show");});});函数 openModal() {window.open(document.URL + '#myModal', '');$(window.location.hash).modal("show");}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- 用按钮触发模态--><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" contextmenu="mymenu">打开Modal</button><!-- 菜单仅在 Firefox 中有效--><menu type="context" id="mymenu"><menuitem label="在新标签页中打开这个模式" onclick="openModal()" icon="/images/refresh-icon.png"></menuitem></菜单><!-- 模态--><div id="myModal" class="modalfade" role="dialog"><div class="modal-dialog"><!-- 模态内容--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">模态标题</h4>

<div class="modal-body"><p>模态中的一些文本.</p>

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

在新标签页中打开它时，我使用了模态的 ID 添加到 URL 中.并使用 window.location.hash 获得相同的 id 以打开模态.

我没有在上下文菜单中找到任何链接来在新选项卡中打开模态，所以我手动添加了上下文菜单.这仅在 firefox 中有效，您可以在 阅读更多有关它的信息https://www.w3schools.com/" rel="nofollow noreferrer">w3schools.com.

如果您想让您的网站浏览器兼容，您可以使用自定义上下文菜单.

现在，您可以在所有浏览器上尝试使用此示例进行中键单击，而在 Firefox 中仅用于上下文菜单

Is there anyway to open bootstrap modal in new tab after click middle mouse button (or just simply click right mouse button on item and click "Open in new tab")?

Expected behaviour:

User can open modal in same tab by clicking left mouse button on item. User can also click middle mouse button (scrollbar) to open modal in new tab.

I can do something similar (link below), but I can't handle case with modal, is it even possible to somehow pass modal to new tab?

JSFiddle: http://jsfiddle.net/vqxf7zyk/1/

(Instead of redirect to google, there should be new modal in the tab)

SOLUTION (based on @RohitSharma answer):

http://jsfiddle.net/vqxf7zyk/10/

解决方案

You can use it. It is working properly.

$(document).ready(function() {
  $('.btn-info.btn-lg').mousedown(function(event) {
    if (event.which == 2) {
      event.preventDefault();
      window.open(document.URL + '#myModal', '');
    }
  });
  $(window).load(function() {
    $(window.location.hash).modal("show");
  });
});

function openModal() {
  window.open(document.URL + '#myModal', '');
  $(window.location.hash).modal("show");
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" contextmenu="mymenu">Open Modal</button>


<!-- menu will work only in firefox -->
<menu type="context" id="mymenu">
  <menuitem label="Open this modal in new tab" onclick="openModal()" icon="/images/refresh-icon.png"></menuitem>
</menu>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

I have used the ID of the modal to add in the URL when opening it in the new tab. And got the same id using window.location.hash to open modal.

I have not found any link in the context menu to open the modal in the new tab, so I have manually added the context menu. That will work only in firefox you can read more about it on w3schools.com.

If you want to make your website browser compatible you can use your custom context menu.

For now, you can try this example on all browsers for middle click and in firefox only for context menu

这篇关于在新选项卡中打开引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆