Open bootstrap modal in new tab Open bootstrap modal in new tab vue.js vue.js

Open bootstrap modal in new tab


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">×</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