CODEWITHSUNDEEP
twitter-bootstrap-3modal-dialogvue.jsbootstrap-modalvuejs2
ulou
ulou

Reputation: 5853

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/

Upvotes: 3

Views: 10931

Answers (1)

Rohit Sharma
Rohit Sharma

Reputation: 3334

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

Upvotes: 4

Related Questions