How to make a bootstrap modal window close when click outside again? - javascript

I'm working in a project using bootstrap framework and I read there are different ways to open a modal window, in my case I open it with javascript with this code:
$('#formVenta').modal({backdrop: 'static', keyboard: false});
I did this because the client asked me to avoid close the modal when click outside but now he wants to press click outside and close the modal again but when there is no content inside a specific div inside my window
<div id="content_goes_here"></div>
I think to solve this in this way
$(document).click(function(e) {
//check if modal is open
if ($('#formVenta').is(':visible')) {
//check if div has content
if ($('#content_goes_here').html().length > 0) {
//do something
}
}
});
The problem I see is that there are text input outside that div and If I want to search something it will close when I make click in the input because there will be not content yet inside the div and I want to avoid this issue.
Is there a way where only when I make click outside the modal window check if the div is empty and make the opposite of the way I opened the window in this case the opposite of this?
$('#formVenta').modal({backdrop: 'static', keyboard: false});
for example change the value of the property backgrop.
I hope you can help me, thanks.

sorry it took a while to find the right properties but here is the best example
$('#formVenta').data('bs.modal').options.backdrop = false; or
$('#formVenta').data('bs.modal').options.backdrop = static;
you can take a look at the current properties you have set by doing
alert(JSON.stringify($('#myModal3').data('bs.modal').options)); or change the alert to console.log()
so you can put an event on the div for when it changes to run the validation function and inside of the validation function you can change the options of the modal with the above code

Related

How to re-open Bootstrap modal accidentally closed

I have a few different modals on a page, and it all works as it should, but if a user makes some input on form fields in a modal and then accidentally clicks outside of the modal (which closes it), they loose their changes, since if the user clicks the same button they pressed to open the modal, the data they entered will be overwritten with data pulled from the database.
So I'd like to have a function for "reopen last closed modal" that simply shows the modal again in it's last used state - with whatever data was in it.
Essentially like a Ctrl-Z for accidentally closing a modal.
It's really simple if you know the ID of the modal. Such as:
$('#myModal1').modal('show'); });
But because I have several different modals available on a page, and I don't want to have a bunch of "restore" buttons, I need to be able to detect the ID of the last closed modal.
If there's not a simpler way, I could capture the ID each time a modal is closed, and then use that ID if the modal needs to be reopened without changing its data. Something like this:
$('#myModal1').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal1';
})
$('#myModal2').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal2';
})
function reOpen() {
$(LastModal).modal('show');
}
But I'm guessing there's a way that's simpler and doesn't require me to state all my modals ID's in JS/jQuery. Any ideas?
I've made a few tweaks, and this is working well for me now, with essentially no other hassle than a few short lines of code in my script file.
var LastModal;
$('.modal').on('hidden.bs.modal', (e) => {LastModal = $(e.target).attr('id'); })
function reOpen() { $('#'+LastModal).modal('show');}
Just use the style class "modal" for your modals, and to call the "reOpen", just have something like:
<span onclick='reOpen();'>Reopen</span>
Thanks #marekful for your suggestion!
Also, if you want to access this (or any other function) by pressing Ctrl+Z, you can add this:
// press Ctrl+Z to restore modal
$(document).keydown(function(evt){
if (evt.keyCode==90 && (evt.ctrlKey)){
evt.preventDefault();
reOpen();
}
});

Reset modal window when closed

I'm using wordpress with visual composer and I have built this demo popup example https://www.air8cushion.com/index.php/popup-test/ when I click on "More Info" button the popup shows up. However when I scroll content inside of it, and close the modal window, and again click on "More Info" I need to reset the content to appear from the top again.
I know its possible to do it with JS but I had fails many times to make it work. Most of examples of similar things online are mostly for Bootstrap and none of them worked for me.
Thanks.
You can use this on click of the close button of your popup
this function will scroll viewport of the popup div to top when clicked
jQuery(document).on('click','.vc_general',function(){
var myDiv = document.getElementById('myNav');
myDiv.scrollTop = 0;
});
".vc_general" is one of the class in your close button. You can add an extra class if you think it will affect the other functionality.

How to clear a featherlight modal

I am using feather-light modal in my page. on the modal one form is there with certain input fields. Once I fill in the fields and close the modal and when I open it again , it contains the previously filled data. I want to clear the data once it is closed. I am using angular js in my page.
Can anyone tell me how can I clear the feather-light modal using angular js?
Update-
In my code I have to open another modal after closing the first modal. And once second modal closes, if I am opening my first modal, its showing the previously filled data, I want to reset the modal data of first modal.
in my html I am using below code-
<button type="submit" ng-click="anotherModal(myForm)" ng-class="{ 'featherlight-close' : myForm.$valid}">Submit</button>
and in script I am using below code-
$scope.anotherModal= function (myForm) {
if ($scope.myForm.$valid) {
$scope.myForm.$submitted = true;
$.featherlight("#f12","open");
}
}
Can anyone tell me where should I add to reset the first modal?
Updated Plunker-
Please find my plunker here-
https://plnkr.co/edit/cDP1eqtUsKkeMaUiCIoM?p=preview
I am using persist ='shared' in my code because if I remove this then form validation won't work on first modal.
My issue is that when I open my second modal next time,it contains previously filled values and from there when I click on submit button my second modal doesn't show up.
Can anyone help me in solving my issue?
If you are using the persist option, then yeah, the form is persisted, so you'll have to clear it yourself.
If not, then you'll get a new copied form each time. In that case though, you'll have to be careful about how you bind it and avoid using any IDs, since those are supposed to be unique.
As far as I know featherlight is gallery plugin, used for displaying images in a lightbox. Considering this it is not meant to be used like that (even though you can, but it will not behave as you expect here out of the box), so that's why you'll have to cleanup behind you (or more specific your users), and on popup close action, clear all form fields. There are several ways to do that, eg. form reset button (input type="reset"), js callback on close popup or submit event (or in your case using angular js events), etc..
Since you didn't provide any code that's all I can tell you for now..
Also possible duplicate of Resetting form after submit in Angularjs
UPDATE
Not sure what exactly are you trying to achive here, but if you remove (or move inside showAnotherModal function) $.featherlight.defaults.persist=true; line, it works as you described, first popup is cleared when you open it for second time. Here is your snippet updated:
var app = angular.module('myApp', ['ngMessages']);
app.controller('myCtrl', function($scope) {
// $.featherlight.defaults.persist="shared";
$scope.showAnotherModal = function () {
$.featherlight.defaults.persist="shared";
if ($scope.myForm.$valid) {
$scope.myForm.$submitted = true;
$scope.myForm.dirty = false;
$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();
$.featherlight("#fl3",'open');
}
}
});

Foundation reveal-modal: how can I return to parent modal after closing modal-in-a-modal

Here is an example of modal in a modal.
http://foundation.zurb.com/docs/components/reveal.html
Is there any way to return to the first modal in the same state, after closing child one?
Or, even better, how can I get modal over modal, not replace first modal with second?
Update: OK, I can just open first modal again, state is the same.
$('#parent-dialog').foundation('reveal','open');
Is it possible to make modal-over-modal?
Is this what you're looking for?
You can create a reveal modal with another inside it. Setting
reveal.multiple_opened to true will not close previously opened reveal
modals. You can even put a video into a reveal.
Source: http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html

A few jQuery questions

First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});

Categories