prevent bootstrap modal from opening when a button is clicked - javascript

I have a page with several bootstrap modals with:
data-toggle="modal" data-target="#modal-12345"
The problem is, I have an entire table row that is clickable, like
<tr data-toggle="modal" data-target="#modal-12345">
The modal content is in another hidden table row right below, followed by the next clickable row and so on. Now, this row also contains a button that will go to another page when clicked.
I need the entire row clickable so it opens the modal, except when the button to go to the other page is clicked, then I need to stop the modal from opening.
I need something like this
<script>
$('.ID').on('click', '.btn', function(e) { e.stopPropagation(); })
</script>
But targeting this:
data-toggle="modal"
I also tried giving the TR a class of "modaltoggle" and then calling it with the javascript as .modaltoggle but that didn't work either.

Add some kind of identifier for the item you don't want to trigger the modal, a class like no-modal for example, then in your jQuery add code for the modal's show.bs.modal event. Capture the relatedElement, which is the element that triggered the event, then see if it has the class you're looking for. If it does, run e.stopPropagation().
BOOTPLY
jQuery:
$('#myModal').on('show.bs.modal', function (e) {
var button = e.relatedTarget;
if($(button).hasClass('no-modal')) {
e.stopPropagation();
}
});
HTML:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Header</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
As you can see, the second button has a class called no-modal. When clicked, the jQuery checks for the existence of that class, and if it exists it prevents the modal from popping. Clicking the first button causes the modal to pop normally because it doesn't have that class.
Bootstrap modals trigger specific events when they're popped by an element on the page, from the moment they're triggered through the moment they've fully popped. You can read about these events to get an idea of what you can use them for by checking the Events section for Bootstrap modals in the official documentation.

$('#myModal').on('show.bs.modal', function (e) {
return e.preventDefault();
});
OR
<button type="button" class="custom" data-toggle="modal" data-target-custom="#myModal">Launch demo modal</button>
<script>
target = $(".custom").attr('data-target-custom');
if(condition) {
$(target).modal('show');
}
</script>
e.stopPropagation(); or e.preventDefault(); it will not work if you going reopen modal or if multiple modal used in your page.

Here's a JSFiddle to demo what I'm about to explain: http://jsfiddle.net/68y4zb3g/
As MattD explained and demonstrated, preventing a modal from launching is fairly easy, though his example applies to standard modal application. Since you use the .btn in your script code, I assume you applied it to all your buttons in question. I've also assumed that you kept the modal code similar to that on the Bootstrap demo page. If you provide your actual table code, I can tailor it specifically to what you already have.
$('tr .btn').on('click', function(e) {
e.stopPropagation();
});
td {
border: 1px #000000 solid;
padding: 10px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<table>
<tr data-toggle="modal" data-target="#modal-12345">
<td>Launch modal 12345</td>
<td><button id="btn-12345" class="btn">12345</button></td>
</tr>
<tr>
<td colspan="2" class="modal fade" id="modal-12345" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
12345
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</td>
</tr>
</table>
Note: I substituted the DIV that would normally act as the outer wrapper of the modal for the TD and added a tidbit of CSS to make it a little easier to see the separation in content.
By using a class that is applied to all the buttons, you don't have to write a function for every single ID. Having said that, I recommend using a custom class as your trigger. .btn is a standard class within the core of Bootstrap, so try using .modalBtn, to prevent any potential for conflict with legitimate Bootstrap functionality.
Hope this helps. ^^

Remove following line from your code:
data-toggle = "modal"
Then, in your function once your validation is done, write following code:
$('#myModal').modal({
show: 'true'
});

Related

how to trigger modal on page load

I have this html modal that is triggered by the button click
<button type="button" class="btn btn-success mb-1" data-toggle="modal" data-target="#largeModal">
Large
</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
horse-like. All three belong to the genus Equus, along with other living equids.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
I want to trigger the modal on page load instead of button click. How can I do this?
if you're working with Bootstrap (then I also assume you're using jQuery), it's as simple as the following in the html of the page you're loading.
$('#largeModal').modal({show: true});
you could also just simulate a click on the modal trigger:
$('.mb-1').trigger('click');
of course, make sure this code comes after the markup with the modal. If that's not possible, you'll have to wrap it in a doc.ready like
$(function(){
$('#largeModal').modal({show: true});
})
or
$(function(){
$('.mb-1').trigger('click');
})
again, this assumes jQuery is assigned as $ in your code.
This is in plain vanilla JavaScript. If you put onload="callBack()" inside of your body tag, you can write a function to load the specific element (your modal in this case).
There are a variety of ways to do this. Most simply, you can select the element you want in a script tag and give it the style display: "inline" (or however you want it displayed). Note: you would have to make your modal hidden first by setting display: none
Example:
body:
<body onload="callBack()">
-elements here-
</body>
script:
<script>
var callBack = function() {
document.querySelector("#largeModal").style.display = "inline";
}
</script>
Hope this helps :)
These solutions will work:
<body onload="script();">
or
document.onload = function ...
or even
window.onload = function ...
Note that the last option is a better way to go since it is unobstrusive and is considered more standard.

Twitter Bootstrap 3 modal dialog not displaying

I have a twitter bootstrap modal that does not render the dialog box correctly and I'm not sure why.
HTML
<p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" data-target="#myModal2">Compare</button></p>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModal2Label">New Label</h4>
</div>
<div class="modal-body">
<p>Something for now.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can see the html in action on this page: Superfood Picker Click on the "Compare" button on the front page.
Based on the html alone I don't see why it doesn't work.
Other relevant points:
1). I have two modals on the same page.
2). The other one works fine.
3). When I switch the ID of the dysfunctional modal to the ID of the modal that displays correctly that modal also displays correctly.
4). The latter point would suggest to me that maybe it's the HTML that calls the modal that's the problem, but when I compare the two I don't see why one would work and the other wouldn't.
Here's the HTML for the second (functional) modal:
HTML (called through a jquery function)
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
I thought that maybe the two were interfering with one another, but if that was the case I'm not sure why the second one would work fine.
As mentioned above, the DIV with an ID of "part2" is display:none. The modal is inside that DIV. You need to make that DIV display block for the modal to be visible.

Cant get modal to work on Meteor app

Good day, I am currently trying to do something extremely simple, to let a modal window appear on a click of a button in Meteor.
So I created a JS file on the lib folder called Sessions where I wrote this code
if (Meteor.isClient){
Session.setDefault('showAhorroGen',false);}
Which first allows me to set the Session as false as a default and when I click it , it will become true and show the dialog.
So then in my client folder I created an event to hear for when the button is clicked, and a helper to return the session.
Template.menu.events({
'click .ahorro': function(event,tmpl){
Session.set('showAhorroGen',true)
}
});
Template.products.helpers({
showAhorroGen : function(){
return Session.get('showAhorroGen');
}})
In my HTML I added the following code, to render the template with the modal if the session showAhorroGen is true.
<h3> Cálcula tu ahorro gratis <button type='button' class='btn btn-danger ahorro'>Aquí</button></h3>
</div>
{{#if showAhorroGen}}
{{> ahorroGen}}
{{/if}}
and finally the template, for testing reasons is only the bootstrap modal example
<template name='ahorroGen'>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
Why does the modal window does not appear?
The problem is that now you've written code that dynamically inserts the HTML code for the modal, but in Bootstrap, you need to activate the modal in order to show it, for example by executing the following JavaScript code: $("#myModal").modal().
EDIT
The easiest way to solve it is by adding the following piece of JavaScript code:
Template.ahorroGen.onRendered(function(){
$("#myModal").modal()
})
Looks like you're targeting the wrong template with your event, and helper definition.
You're currently targeting the "menu" template in your event, and the "product" template for the helper. These should both be targeting the same template.

Bootstrap - Modal isn't working

I Have the modal set like this
<body>
<div class="modal fade" id="pageopen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
x
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"> Submit changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button onclick="showModal('http://www.google.co.id/')">Show Modal</button>
</body>
I've added the latest jquery, bootstrap js and css for only the modal plugin.
The problem I have is that the modal backdrop shows, however the modal header body and etc isn't showing up.
My Code
Please provide solution, thank you
Your Javascript Code is wrong, to open a Bootstrap 3 Modal you should use:
$('#pageopen').modal({
show: true
});
If you want to load an external Page, you can set the url here:
$('#pageopen').modal({
show: true,
remote: 'http://www.example.com'
});
And better use the jQuery click Function instead of "onClick".
Your problem is that the showModal function isn't found by onclick, please stop using onclick in your html forever. That has never been a good practice.
Instead of this set an ID for button and use the .click function in JQuery:
<button id="showModal">Show Modal</button>
$("#showModal").click(function(){
$('#pageopen').modal();
});
Check JSFiddle Demo
Haha, never mind. I have separate js and css for the same bootstrap component so it overlapped over each other.
Tip for bootstrap :
Always load only one js file and one css file for bootstrap.
If you're like me that want's only part of the bootstrap instead of all the package, (e.g: modal, transition and carousel), then make it as one js and css from getbootstrap

Jquery backdrop modal popup

I am looking for jQuery modal popup which should display image like sample check to show routing number etc,.. When I click on a Routing number(?)question mark it should pop-up an image and should have closing button on the top right corner. I have seen different approaches but couldnt find exact one
Check out the Bootstrap Modal. Click the Launch demo modal button.
In <head> make sure you include the javascript for jquery and bootstrap.js. You can download bootstrap.js from the bootstrap site. You also might want to include the bootstrap.css as well.
Once your <head> is all setup, in your body you need to add the modal code which will be hidden and you'll need to add a button to show the modal. The button and modal are linked together by id.
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>

Categories