I'm using the jQuery UI Dialog function and upon close, I would like to hide one of the elements which was in my dialog.
I'm attempting to do this within the close event of the Dialog function but it's not working. I am guessing because that element no longer exists at the time of close.
Here's the code.
// Dialog settings for our edit dialog's
$("#myDialog").dialog({
autoOpen: false,
close: function(event, ui){
$("#myDiv").hide();
}
});
<div id="myDialog">
<div id="myDiv">This div should hide when the user closes the dialog, but it stays open when I re-open the dialog.</div>
</div>
myDialog and everything inside it, including myDiv, should automatically be hidden when the dialog is closed. You don't need to write any additional code to make that happen. If isn't working, then something else is wrong. My guess based on the code sample in your question:
Hide myDialog by default, e.g., <div id="MyDialog" style="display:none;">...
Explicitly open the dialog when appropriate, e.g., $("#myDialog").dialog("open");
you probably just need to reference those elements relative to the dialog.
$("#myDialog").dialog().find('#myDiv').hide()
-edit-
close: function(event, ui){
$(this).find('#myDiv').hide()
}
Related
Suppose I create a dialog with jQuery (if relevant - 1.7.1). The dialog opens a div (let's name it "divToEmpty") that can contain thousands of text divs inside of it. Suppose further that I want to empty the aforementioned div on dialog close.
There are 2 options:
// options 1
$('#divToEmpty').dialog({
beforeClose: function() {
$('#divToEmpty').html('');
}
});
// option 2
$('#divToEmpty').dialog({
close: function() {
$('#divToEmpty').html('');
}
});
Option 1 is much, much faster than option 2 (which crashes jQuery script on large enough quantity of inside divs).
Why?
My conjecture is that some infinite loop gets created when resetting a closing dialog (cascades of DOM and style changes or something like that), which is avoided is you reset the div first and then close the dialog. But this idea is funky in itself...
Requirement is to show dialog box on click of a button.I have created dialog box using jQuery UI. Please find the code here http://jsfiddle.net/M4QM6/32/.
ISsue is i have single function for creating dialog box, how can i show multiple dialog box within same page with each dialog box displaying different data,
When i click on dialog2 button, i need to show a dialog box which has textArea and a submit button.Please suggest.
Below is the sample code:
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: true,
width:"750",
height:300,
modal: true,
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
});
You could go a couple routes. Since your need for dialog content is pretty specific (textarea control - first dialog pops second dialog - etc), I would hard-code the needed divs on the page. So, make a "#textAreaDialog" div and put the needed controls in it ad set its style to display:none.
Next, modify your function to accept parameters (the name of the div that should be popped, the funciton to execute if "OK" is clicked - and the function to execute if "Cancel" is clicked), so you're not limited to using #dialog for all of your modals and you can finely control what happens when each button is clicked (not always just closing the dialog. Then, set event handlers for the click events of the buttons you need, and call your dialog accordingly.
html:
<input type="button" id="btnPopFirstModal" Value="Open First Modal"/>
<div id="divFirstModal" style="display:none;">
Here is the content for the first modal
</div>
<div id="divSecondModal" style="display:none;">
Here is the content for the second modal
</div>
Javascript functions:
function PopDialog(divToPop, OkFunction, CancelFunction)
{
$("#" + divToPop).dialog({
autoOpen: false,
resizable: true,
width:"750",
height:300,
modal: true,
buttons: {
"Ok": function() {
OkFunction();
$(this).dialog("close");
},
"Cancel": function(){
CancelFunction();
$(this).dialog("close");
}
}
});
});
}
function PopSecondModal(){
PopDialog("divSecondModal", function(){ put code for OK Click here}, function(){put code for Cancel Click here});
}
Javascript event handlers:
$("#btnPopFirstModal").click(function(e){
e.preventDefault();
PopDialog("divFirstModal", PopSecondModal, function(){}); //empty function for cancel, but you can add your own code as needed
return false;
});
Remember, you can expand this as much as you want, adding more event handlers and custom divs to use for more tailored modals. Also, as you can see, you can write your OK and Cancel funcitons inline when calling the PopDialog function - or you can pass it a function name (this is preferable if you're going to reuse that function).
Here is how I did:
$(
//when JQuery is ready
funciton()
{
$('#SomeButton').on
(
'click',
function()
{
//Note that content could be anything (HTML, text...)
//This dynamicly create a div to be your dialog
$('<div>').append(content).dialog
(
{
//autoOpen: false, I removed it you can put it back in if you need it but I dont think its important for now
resizable: true,
//I remove the double quotes here because height didn't have any but maybe it was the other way around
width:750,
height:300,
//I put this on false because if two or more dialog would need to be displayed at the same time you can't have them modals.
modal: false,
buttons:
{
Close: function()
{
$(this).dialog("close");
}
},
//this is important it destroys and remove the dynamically create dialog when you close them so you don't get 20 dialog not displayed in your html markup.
close:
function()
{
$(this).dialog('destroy').remove();
}
}
);
}
);
}
);
Once my pop up box has faded in, i want it to fade away when the user clicks away from pop up box.
Currently, it fades in and then fades straight back out again.
Jquery
function jsRef(){
$('#footButton').click(function(){
$('#refPop').fadeIn(1000);
});
$('body').click(function(){
$('#refPop').fadeOut(1000);
});
HTML
<button id="footButton" onClick="jsRef()" type="button">References</button>
EDIT**
The file in question is sitting at the bottom of a main file via PHP include.
The pop up box should fade out when the body of the main file is clicked
Add e.stopPropagation() to the button click or add the body click event after you opened the popup.
Like:
$('#footButton').click(function(){
$('#refPop').fadeIn(1000);
$('body').click(function(){
$('#refPop').fadeOut(1000);
});
});
Or:
$('#footButton').click(function(e){
e.stopPropagation()
$('#refPop').fadeIn(1000);
});
$('body').click(function(){
$('#refPop').fadeOut(1000);
});
I would definitely prefer the e.stopPropagation() solution.
Also you dont need you function jsRef() in the onClick attribute of the button.
I think you need to use event.stopPropagation() to prevent click event on the button buble up the DOM tree:
$('#footButton').click(function(e){
e.stopPropagation();
$('#refPop').fadeIn(1000);
});
You're also missing a closing bracket of your jsRef function:
function jsRef(){
$('#footButton').click(function(){
$('#refPop').fadeIn(1000);
});
} // <-- Here
The problem is both events are being fired which is causing the modal to be shown and then hidden immediately. I'd go about this in a different way, separating your modal content from your modal wrapper, making the modal fade out when the user clicks the modal wrapper:
<button>Show modal</button>
<div class="modal wrapper"></div>
<div class="modal body">I'm a modal!</div>
CoffeeScript (This isn't Javascript but is a "tiny language that compiles" into JS, hopefully you get the idea):
$('button').click ->
$('.modal').show()
$('.modal.wrapper') .click ->
$('.modal').hide()
Working JSFiddle with some SCSS styling (again, SCSS isn't CSS, it's a language that's compiled into CSS).
I'm trying to create a basic modal myself and I'm having a little bit trouble here (maybe it's because I'm an expert working with jQuery - don't take it seriously).
I have this HMTL markup:
<div id="modal-boxes">
<div id="modal-updates" class="modal-content">
Content for modal box here.
Close
</div>
</div>
<div id="modal-mask"></div>
So, I made a function that tells the modal box to close and to make disappear the #mask div. And another one to when I click outside of it, it closes anyway. In other words, clicking outside the #modal-updates div is the same that clicking on close button. But the problem is that when I want to click inside the #modal-updates div (should not disappear) it closes anyway. Here is my javascript code:
$(".modal").click(function(e){
e.preventDefault(); // Cancel the default link behavior
$("#modal-mask").fadeTo(400, 0.4);
$("#modal-boxes").fadeIn();
var getName = "#" + $(this).attr("name");
$(getName).fadeTo(400, 1);
});
function closeModal() {
$("#modal-mask, #modal-boxes").fadeOut();
}
$(".close-modal").click(function(e){
e.preventDefault();
closeModal();
});
$(".modal-content").click(function(){
closeModal();
});
Any help?
Regards, Tiago Castro
Try:
$('#modal-updates').click(function(e) {
e.stopPropagation();
});
If done right, this will stop $("#modal-boxes").click() from triggering.
[edit] fixed a typo and added link to jsFiddle with it working
Why not using the modal dialog of jQuery?
About your example :
1) for the link I prefer to do something like:
Close
That way no need to deal with things like preventDefault or click event
2)I guess that instead of binding your click event to ".modal-content" you wanted to bind it to "#modal-mask" ;)
In a very simple jQuery modal, I close the modal by clicking on CLOSE as
$('#close').click(function(e) {
e.preventDefault();
$('#overlay, #alertModalOuter').fadeOut(400, function() {
$(this).remove();
});
});
How can I close the modal by clicking whether on CLOSE button (which is inside the modal windows) OR clicking anywhere outside the modal window.
Changing your function like so should work:
$('#close, #overlay').click(function(e) {
e.preventDefault();
$('#overlay, #alertModalOuter').fadeOut(400, function() {
$('#close').remove();
});
});
I found it helpful to include:
$('.item-modal').click(function(e) {
e.stopPropagation();
});
Add the same click listener to your overlay.
I know this question pertains to jQuery, but here's how I did this in Vue on my modal component in case anyone finds it helpful. My modal HTML is basically lifted directly from this: https://v2.vuejs.org/v2/examples/modal.html
I set two #click attributes, one on the outermost modal element (modal-mask) that calls my close() method (which emits the close event to the parent component) and one on the actual modal window element (modal-container) that with the .stop event modifier (#click.stop) to stop the click from bubbling up to the parent element (modal-mask). Works like a charm.