在新标签页中打开引导程序模式 [英] Open bootstrap modal in new tab

问题描述

单击middle mouse button(还是直接单击项目上的right mouse button和click在新选项卡中打开")，是否仍然可以在新选项卡中打开bootstrap modal?

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")?

预期行为:

用户可以通过单击项目上的left mouse button在同一选项卡中打开模式.用户还可以单击middle mouse button(滚动条)在新标签页中打开模式.

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.

我可以做类似的事情(下面的链接)，但是我不能用modal处理情况，是否有可能以某种方式将模式传递给新标签页?

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/

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

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

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

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

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

推荐答案

您可以使用它.这是工作财产.

You can use it. It is working property.

$(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>

在新标签页中打开网址时，我已使用模式的ID添加网址.并使用window.location.hash打开模式获得了相同的ID.

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

我没有在上下文菜单中找到任何链接来打开新选项卡中的模态，因此我手动添加了上下文菜单.只有在Firefox中才能使用，您可以在了解更多. https://www.w3schools.com/"rel =" nofollow noreferrer> w3schools.com .

I have not found any link in context menu to open the modal in new tab so I have added the context menu manually. 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 you custom context menu.

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

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

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