Open bootstrap modal in new tab

问题

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/

回答1:

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>

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.

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.

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

来源：https://stackoverflow.com/questions/45008678/open-bootstrap-modal-in-new-tab