We Keep Coding

Closing Bootstrap Modal When Condition Met

I have a bootstrap modal v3.2.0, which shows on page load. It is being used as an age verification pop up.
I am looking for a way to close this modal if a condition has been met. Basically, when the user clicks a button, I want it to close but I also want to ensure that the modal does not appear again on page load after clicking that button.
Here is the code
$(window).load(function(){
$('#myModal').modal('show')
});
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" 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 id="footer-close" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This code works to successfully load the bootstrap modal on page load and closes the modal when you click on the close button however the modal will still appear again on page load. As I am not very strong with Javascript, I am not certain how to go about a conditional or if statement. So far I have the bare bones:
if (condition) {
$("#myModal").modal('hide');
} else {
// block of code to be executed if the condition is false
}
Inside the original if statement should be if the close button has been clicked. It should also prevent the modal from auto loading again. Maybe I don't even need the else statement.
Their might even be a better option I haven't considered. Any help much appreciated.
$('#myModal').modal('show')
$('#over18').on('click', function (e) {
$('#myModal').modal('hide')
});
<!-- Modal -->
<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">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
<img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
</div>
<div class="modal-body">
<p class="modal-p">You must be at least 18 years old to enter this site.</p>
</div>
<div class="modal-footer">
<button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
I am under 18
</div>
</div>
</div>
</div>
For additional clarity, if I use the following code, when you click the button it does show the alert, so the javascript and code is working for that, it simply won't work when using the bootstrap: $('#myModal').modal('hide');
$('#over18').on('click', function () {
alert('Hello!');
});
So after some more playing around, the following code will auto open the modal, when the over 18 button is clicked it will be closed, and an alert will appear to say the modal is about to be hidden. I done this to make sure the javascript was working.
The line that is calling the alert is where I should be putting the localstorage line to ensure the modal does not show again. However this does not work.
$("#myModal").modal("show");
$("#over18").click(function(){
$("#myModal").modal("hide");
});
$("#myModal").on('hide.bs.modal', function(){
alert('The modal is about to be hidden.');
});

You could try something like this, to decide whether to show the modal:
// On initial page load
if (localStorage.getItem('age-verified') !== true) {
$("#myModal").modal('show');
}
Then, if the modal shows - do something like this:
// Upon the age being confirmed
$('#footer-close').on('click', function() { // This is for illustration - handle the close event on the modal however you choose
$("#myModal").modal('hide');
localStorage.setItem('age-verified', true);
});
Updated - based on new code you posted
I've managed to create a working example for you. The script tags in your HTML document need to be in the same order as below. Bootstrap relies on jQuery - so that needs to be declared first.
Also to note - if you try running this example in StackOverflow's code snipped editor, it won't work - as code snippets are sandboxed, and don't have access to localStorage. You should be able to run it locally on your own computer though.
if (localStorage.getItem('age-verified') !== true) {
$('#myModal').modal('show');
$('#over18').on('click', function (e) {
$('#myModal').modal('hide');
localStorage.setItem('age-verified', true);
});
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Your page content here</h1>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
<img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
</div>
<div class="modal-body">
<p class="modal-p">You must be at least 18 years old to enter this site.</p>
</div>
<div class="modal-footer">
<button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
I am under 18
</div>
</div>
</div>
</div>

You can refer to the official bootstrap reference guide to do this depending on what version of bootstrap you are using. See Reference

Why I can't get the value of input in modal (Using Jquery & Javascript)

I have problem regarding getting the value in input textbox, this textbox was in modal form. I'm confuse when i put static value in input textbox the value is not empty, however when i use the element id value i can't get any value and the alert shows empty.
Modal:
<form action="" method="post" enctype="multipart/form-data">
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">New Menu Section</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label>Menu Name</label>
<input placeholder="For sharing..." name="menu_name_category" value="" class="form-control" id="menu_value" type="text" class="validate">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save_menu_button">Save changes</button>
</div>
</div>
</div>
</div>
</form>
Javascript & Jquery:
var textFieldVal = document.getElementById("menu_value").value;
$('#save_menu_button').click(function() {
alert(textFieldVal);
});

You can get the value like the following
$('#save_menu_button').click(function(){
alert($('#menu_value').val());
});
No need for document.getElementById

For any one that might still need this, I found one correct answer at https://www.youtube.com/watch?v=8zTL1LMxBqc
Using JQuery, you just need to add the Modal ID to to the selector as below:
var textFieldVal = $("#exampleModalLongTitle #menu_value").val();

What happen here is you're getting value of your text field while loading and using that value in your click function.
Update your code as below. Only get element in object and use textFieldVal.value. It will solve your issue.
var textFieldVal = document.getElementById("menu_value");
$('#save_menu_button').click(function(){
alert(textFieldVal.value);
// With jQuery try like below.
// alert($('#menu_value').val());
});

The issue is that you're getting the input DOM value when the document is ready.
You should get the text input value when the click event handler is triggered.
$('#save_menu_button').click(function(){
var textFieldVal = $("#menu_value").val();
alert(textFieldVal);
});

change your script
$('#save_menu_button').click(function(){
var textFieldVal = document.getElementById("menu_value").value;
alert(textFieldVal);
});
the data was set when your html was set .. that why it alert empty ... if you put it inside the click function ... it get data when you click ...

Why doesn't my next modal.show() not always work?

I have two Bootstrap Modal's in my Template.PageName.helper Meteor.callPromise() that I would like to fire-up in a specific order. The order being: modal.hide('loadingPageAnimation') followed by modal.show('c2bNotifications').
By default, modal.hide('loadingPageAnimation') is activated in the page Router.route('/page') by modal.show('loadingPageAnimation')
This successfully displays the modal.show(loadingPageAnimation) while (in my helper) my Meteor.CallPromise() is awaiting results:
../client/main
Meteor.callPromise('c2b').then(
function(results) {
//### When results comes through, Modal.hide('loadingPageAnimation')
Modal.hide('loadingPageAnimation');
//### then Modal.show('c2bNotifications' along with results message)
Modal.show('c2bNotifications', {msg: results};
}).catch( function(error) {
alert("Error!");
}
);
The problem here is that, when the Meteor.callPromise('c2b') returns results, the Modal.hide('newLoadingModal'); is successfully hidden, but the Modal.show('c2bNotifications', {msg: results}); only shows sometimes and sometimes it does not show. I would like some consistency in Modal.show('c2bNotifications', {msg: results}); always showing/working. Can anyone explain why this happens and perhaps give a better coding solution whereby Modal.show('c2bNotifications', {msg: results}); is forced to show?
Find below my template file.
../client/main.html
<template name="c2bNotifications">
<div class="modal fade makeAnOffer">
<div class="modal-dialog modal-sm">
<div class="modal-content modal_MakeAnOffer">
<div class="modal-header">
<h4 class="modal-title">Notification </h4>
</div>
<div class="modal-body">
<div id = approvedMsg > {{msg}} </div>
</div>
<div class="modal-footer c2bNotifications">
<button type="button" class="btn btn-primary btn-lg" id="paymentNotificationClose" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
Looking forward to your help

First solution: What you can do is to add a little timeout to let the first modal the time to be hidden. Then call the Modal.show().
{
Modal.hide('loadingPageAnimation');
setTimeout(function(){
Modal.show('c2bNotifications');
}, 1000);
}
The problem is that you need to wait for the first modal to hide because there is no parameter to add a callback to the Modal.hide() function with the peppelg:bootstrap-3-modal package. If the code above really doesn't work, you can add this code
Modal.allowMultiple = true;
Second solution: I see you that you are using the first modal to show a loading sign, maybe you could add this sign into the c2bNotifications, and showing it with an helper like that :
<template name="c2bNotifications">
<div class="modal fade makeAnOffer">
<div class="modal-dialog modal-sm">
<div class="modal-content modal_MakeAnOffer">
<div class="modal-header">
<h4 class="modal-title">Notification </h4>
</div>
{{#if isLoaded}}
<div class="modal-body">
<div id = approvedMsg > {{msg}} </div>
</div>
<div class="modal-footer c2bNotifications">
<button type="button" class="btn btn-primary btn-lg" id="paymentNotificationClose" data-dismiss="modal">Close</button>
</div>
{{else}}
<!-- insert loading page animation -->
{{/if}}
</div>
</div>
</div>
</template>
And your helper code should look like that:
Template.c2bNotifications.helpers({
isLoaded(){
// return true if your Meteor.callPromise succeed, otherwise false
},
});
Third solution:
You could try to create a homemade callback, maybe by checking if the modal exist in the DOM.

jquery accessing data-attrs

I'm using bootstrap modal for destroying task objects. When I click on a given task on the index page the modal window pops up and the destroy link of that task gets loaded via data attr, so modal will know which task should be destroyed when user clicks on #delete-task-submit button.
The code works as it is, but I'd like to use data-behavior="delete-task-submit" instead of #delete-task-submit to be clear that this has nothing to do with styling and it's only there for the js call.
What's the right way to do it? I'm asking this because #delete-task-submit is used in the first js call for finding/setting data-task-destroy-link and don't know how else I can find that data attribute without adding id/extra class there.
<div class="modal fade" id="delete-task-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="text-align:left">
<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">Delete Task</h4>
</div>
<div class="modal-body">
<h4>Are you sure?</h4>
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deletetaskclose">Close</button>
<a href="#" id="delete-task-submit" type="button" class="btn btn-danger" data-task-destroy-link >Delete Task</a>
<!-- DESTROY LINK GETS INSERTED HERE -->
</div>
</div>
</div>
</div>
$(document).on('click', '[data-behavior="open-delete-task-modal"]', function (event) {
var taskDeleteLink = $(this).data("task-delete-link");
$('#delete-task-submit').data("task-destroy-link", taskDeleteLink);
});
$(document).on('click', '#delete-task-submit', function (event) {
var href = $(this).data("task-destroy-link");
$.ajax({
type: "DELETE",
url: href,
dataType: "script"
});
});

I'm asking this because #delete-task-submit is used in the first js call for finding/setting data-task-destroy-link and don't know how else I can find that data attribute without adding id/extra class there.
Replace $('#delete-task-submit') with $('[data-behavior="delete-task-submit"]') selector in that part of your code and add data-behavior="delete-task-submit" attribute to your link.
Delete Task

Full calendar not showing inside bootstrap modal

I want to load a modal dialog using bootstrap modal. Inside of it i want to show a fullcalendar (the jquery one) with some events on it. I have created my modal, and put inside the full calendar. But Full calendar won't show when modal appears. But it shows when after the modal has appeared i press on either next or previous buttons. But then no event appears on the calendar.jsfiddle here
and code
Launch demo modal
<div id="myModal" class="modal fade" 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">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-6">
<div id="calendar"></div>
</div>
</div>
</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>
</div>
js
$("#calendar").fullCalendar({
header:{
left:'prev',
center:'title',
right:'next'
},
events:'/eventsfeed/',
defaultView:'agendaDay'
});
That also make events not to appear on calendar. This is what my /eventsfeed is returning
[{"url": "/calendar/entry/223", "start": "2013-12-04T17:00:00Z", "end": "2013-10-04T16:45:00Z", "description": "a body", "title": "Title entry"}]
I use fullcalendar in different pages of my project and events and everything render normally.
How can i make it load when modal appears

You should try this :
$('#myModal').on('shown.bs.modal', function () {
$("#calendar").fullCalendar('render');
});
Here is your fiddle : http://jsfiddle.net/mzAEj/2/
Here is the documentation : http://arshaw.com/fullcalendar/docs/display/render/
FullCalender V4
In reading the doc you can read that this command is deprecated,
You've to call calendar.render() is order to have the same behaviour
Extract of code :
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ dayGridPlugin ]
});
calendar.render();
Doc source

You can use the this approach.
After the loading of .modal trigger the MONTH, DAY or WEEK button of the Calendar.
$('.modal').focus(function(){
$('.fc-month-button').trigger('click');
});