Open boot mod in a new tab
Is it possible to open bootstrap modal
in a new tab after clicking middle mouse button
(or just click right mouse button
on an item and click
"Open in New Tab")?
Expected Behavior:
User can open modal value in one tab by clicking left mouse button
on element. User can also click middle mouse button
(scroll bar) to open modal tab.
I can do something like this (link below), but I cannot handle register with modal
, is it possible to navigate to a new tab in some way?
JSFiddle: http://jsfiddle.net/vqxf7zyk/1/
(Instead of redirecting to google, there should be a new modality in the tab)
SOLUTION (based on answer @RohitSharma
):
source to share
You can use it. This is a 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">×</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 used ID
modal to add to url when opening it in a new tab. And got the same id using window.location.hash
to open the modal.
I didn't find a link in the context menu to open the modal text in a new tab, so I added the context menu manually. This will only work in firefox, you can read more about it at w3schools.com .
If you want to make your browser web browser compatible, you can use the custom context menu.
Now you can try this example in all browsers for middle click and in firefox for context menu only
source to share