Open bootstrap modal in new tab - twitter-bootstrap-3

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/

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

Related

Problem Displaying Bootstrap Modal in ASP.NET Core Razor Page

I'm new to ASP.NET Core and trying to figure out how to display a Bootrstap modal based on a string property of the underlying page Model (Model.Message). I've tried several different things and nothing is working. Below is a sample Bootrstap modal I found on the Bootstrap website. I can get the modal to display with a button, but that's not the functionality I am looking for.
<!-- Modal -->
<div class="modal fade" id="UserDialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
EDIT: Added code to my scripts section at the bottom of the page and a new JavaScript function in an external .js file.
Here's my scripts section on the Razor page
#section scripts
{
<script>
$(document).ready(function () {
ShowModalDlg();
var message = '#Model.Message';
if (message != "") {
ShowModalDlg();
}
});
</script>
}
Here's the new JavaScript function in my external file
function ShowModalDlg()
{
$("#UserDialog").modal("show");
}
The ShowModalDlg() function does get called when it is supposed to, but the bootstrap modal is not showing. The button I added to test "showing" the modal still works. I also added (although not shown here) a temporary call to alert("I'm here!") inside of the ShowModalDlg() function and the alert shows perfectly. I did just check the Chrome debug console and I am getting an error that seems to indicate I am loading jquery twice. That error message is:
"$(...).modal is not a function"
So it looks like I need to figure out where that's happening.
I have the following in my _Layout.cshtml page:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
If I understand you, this kind of approach might solve your problem. We define a ShowModal variable sent from the controller as a javascript variable, then we trigger the modal by checking the value of this variable.
EDIT: We expect 'show' string as showModal variable from controller.
<script>
var showModal = '#Model.showModal';
if(showModal == 'show'){
$("#exampleModal").modal("show");
}
</script>
If you use it this way it will work. You can check it here.
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- You may not really need this. -->
<!-- Bootstrap 5 (https://getbootstrap.com/docs/5.0/getting-started/download/) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I fixed the problem by combining the answer above with the following:
$(window).load(function ()
{
var message = '#Model.Message';
if (message != "") {
ShowModalDlg();
}
});
I should not have had that code inside of document ready, which is why it wasn't working and also causing the error message.

Materialize modal is not working in Angular

ts file
html file
This is the code in my project. When clicking on modal button it's not showing anything.
HTML:
<button data-target="modal1" class="btn modal-trigger">Modal</button>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JavaScript:
declear const M;
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
have you imported the css,js correctly? can you give us more details about your code? e.g How does your .html looks like and how is your folder structure etc?

bootstrap 4 modal doesn't open at first click using vue js

My bootstrap 4 modal doesn't show up when I press on my button, but my computed property is for triggered(from the console)
Here is my template code
<form>
<!-- button that triggers the modal -->
<div id="btnBereken">
<a
class="btn btn-success btn-lg"
data-target="#exampleModal"
v-on:click="Vali"
v-bind:data-toggle="Validation"
>Bereken</a>
</div>
</div>
</form>
<!--modal itself-->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
v-show="Ok"
></div>
Here is my script code I have one method and one computed property that is linked to data-toggle of my button
Vali: async function(){
this.Ok =true;
}
and my computed property
Validation() {
if (this.Ok) {
console.log("getriggerd");
return "modal";
}
}
When I press on my button once it the pop doesn't trigger but the second time it does, and my value for this.Ok gets updated on my console and in VueJS dev tool

How can I close modal after click save button in vue component?

My vue component like this :
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
...
<div class="modal-footer">
...
<button type="button" class="btn btn-success" #click="addPhoto">
Save
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
...
methods: {
addPhoto() {
const data = { id_product: this.idProduct };
this.$store.dispatch('addImageProduct', data)
.then((response) => {
this.$parent.$options.methods.createImage(response)
});
},
}
}
</script>
If I click button addPhoto, it will call addPhoto method.
addPhoto method used to call ajax. After response of ajax, it will pass the response to createImage method in parent component
After run it, the modal not close. Should the modal close after click save button
How can I close the modal after call createImage method?
You cannot use Bootstrap and Vue together this way. Each wants to control the DOM, and they will step on each others' toes. To use them together, you need wrapper components so that Bootstrap can control the DOM inside the component and Vue can talk to the wrapper.
Fortunately, there is a project that has made wrapper components for Bootstrap widgets. It is Bootstrap-Vue. Its modal will automatically close when you press its ok button. I have turned their modal example into something that is vaguely like what you're trying to do.
new Vue({
el: '#app',
methods: {
clearName() {
this.name = '';
},
addPhoto(e) {
console.log("dispatch the request");
}
}
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#next/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/tether#latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
<!-- Modal Component -->
<b-modal id="modal1" title="Whatever" ok-title="Save" #ok="addPhoto" #shown="clearName">
<form #submit.stop.prevent="submit">
Form stuff...
</form>
</b-modal>
</div>
</div>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
if i understand what you want then, add this data-dismiss="modal" to whichever button you want to use for closing the modal.. suppose you have a button Upload Image on clicking which you want to upload the image as well as close the modal then add data-dismiss="modal" to the button property like i have shown above...

how to fix jquery error "Uncaught TypeError: Cannot read property 'style' of undefined" for blue-imp gallery in modal Bootstrap?

I used bootstrap 3 and blueimp-gallery in a web html5. My problem is a carousel-gallery dont show images and receive a error in a console "Uncaught TypeError: Cannot read property 'style' of undefined" when i use a blueimp-gallery-carousel in a modal div, but if i enter in a developer tools for chrome, this error disappears, and the images show in carousel-gallery.
The code.
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Vinilos</h2>
<div id="links">
1
2
3
</div>
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<p>Vinilos para rotulacion, decorativos, efecto espejo, fibra de carbono, refractivos, hologramas y farolas</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar Producto</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my javascript
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
</script>
and the link web problem
http://www.colombiawaterprint.com/web/index3.html
How i Solve this error?
I believe your problem is that your blueimp gallery is initially hidden as it is in a Bootstrap Modal. As such, when you first initialize the gallery it can't find the gallery. I think all you need to do is wait for the Bootstrap modal to be shown and then initialize the gallery.
Bootstrap triggers an event that you can listen for for this very purpose - http://getbootstrap.com/javascript/#modals-events - You probably want the shown.bs.modal event.
You would use it something like this. (assuming jQuery is loaded)
$('#portfolioModal1').on('shown.bs.modal', function (e) {
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
})
Bear in mind this is untested code and may not 'just work'. But hopefully you get the idea. You also may want to do a test to see if you've already initialized the gallery, as it stands this would re-initialize it every time the shown.bs.modal event was fired.