I didn't find this in the documentation.
Should I just make the close button display:none with css, or is there a clean way in the API to make a dialog without the X button (top-right)?
This may solve your Problem:
$("#dialogId").dialog({
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).hide(); }
});
There is no option to disable the 'X' button. You would need to add css to display none/hide() the element with the class 'ui-icon-closethick' when it is loaded and opened.
For some reason .hide() did not work for me. This did:
$('#divMsg').dialog({ title: 'Please wait...',
modal: true,
closeOnEscape: false,
open: function (event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).css('display', 'none'); } }).text('Text To Display').css('background', 'white');
This code snippet also shows how to set the title and text of the dialog box -- I am using it as a modal notification window and closing it when my AJAX call completes.
Related
I'm working with jquery and I'm trying to listen for how may are there open after I close a dialog, but I'm getting how many where open.
For example: if I have 4 and I close one it returns 4 when I expect to get 3, and at the end when I have only 1 open it returns 2, and at the end the when I close the last one return 1.
Am I doing right? I try look in the docs and try to look for something like afterClose but there is not.
$( ".test" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
close: function(e){
$(this).destroy();
// This returns wrong lenght
console.log($('.test').length);
if($('.test').length === 1) {
console.log($('.test a').text());
}
}
});
How are you getting those numbers? Unless you are destroying dialogs calling
$('.test').length
is always going to return the number of classes of test on the dom. Are you using .remove() or something to remove the dialogs? More information is needed.
When you close a dialog it does not remove it from the DOM. It just hides it, you can see the hidden html at the bottom of the page. The proper way to use multiple dialogs is to use instances of dialogs. but that shit is complicated. Post some more of your code, specifically how you are setting up your html and if you are some how deleting dialogs.
Also (since i cant comment yet), the close event fires as the window is closing but before the window is hidden, this allows you two places to cancel the close event, beforeClose (typically for some validation), and close (maybe where you do some population of objects or something).
Try changing the jQuery selector to search for visible items:
$( ".test" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
close: function(e){
// This returns wrong lenght
console.log($('.test:visible').length);
if($('.test:visible').length === 1) {
console.log($('.test a').text());
}
}
});
Source
$( ".test" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
close: function(e){
$(this).destroy();
// This returns wrong lenght
console.log($('.test').length);
if($('.test').length === 1) {
console.log($('.test a').text());
}
}
});
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();
}
}
);
}
);
}
);
I am using Magnific Popup.
I want to close popup when click anywhere on page close popup.
Here is my code fiddle:
http://jsfiddle.net/qweWa/24/
Code :
$('.popup-modal').magnificPopup({
type: 'inline',
modal: true,
});
$(document).on('click', '.closePopup', function (e)
{
e.preventDefault();
$.magnificPopup.close();
});
Slight adjustment ,check fiddle :)
$('.popup-modal').magnificPopup({
type: 'inline',
modal: false,
});
> $(document).on('click', '.closePopup', function (e)
> {
> e.preventDefault();
> $.magnificPopup.close();
> });
http://jsfiddle.net/qweWa/27/
You need to set modal: false
Demo Fiddle
modal: When set to true, the popup will have a modal-like behavior: it won’t be possible to dismiss it by usual means (close button, escape key, or clicking in the overlay).
$('.popup-modal').magnificPopup({
type: 'inline',
modal: false
});
From Magnific-Popup Documentation There's actually no need to set modal:false explicitly. Which most of the answers have done.
If you go through the documentation you'll find that, If you don't even pass the modal attribute it work. I've edited JSFiddle as per your requirement. I think unnecessary override a attribute can be avoided in this case.
Just these would be fine:
$('.popup-modal').magnificPopup({
type: 'inline',
});
Note: Don't forget to note the difference of this answer with another answers.
I am at the bottom of my page and click a button to open my modal dialog. The dialog pops in the center of my screen like it should, BUT the document scrolls to the top of the page! I don't want the document to scroll ANYWHERE when I open the dialog. Now I have to manually scroll to the bottom of the page to see the dialog. It is BAD since the user only sees an empty darkened page without the dialog visible.
jQueryUI:
$(dialogBox).dialog({
autoOpen: false,
modal: true,
draggable: false,
resizable: false,
width: 'auto',
//show: effect,
//hide: effect,
//open: function(event, ui) {
//$('html').css('overflow', 'hidden');
//},
//close: function (event, ui) {
//$('html').css('overflow', 'auto');
//}
});
OnClick:
parent.dialogBox.dialog("open");
Thanks!
Make sure if you have this:
Click me! or Click me!
In your OnClick you do this:
e.preventDefault();
I am trying to make fire a callback on dialog close, and I am unable to debug it from developer tools/firebug. The code defined after beforeclose label is never executed:
$(".dialog").dialog({
autoOpen: false,
modal: true,
width: 300,
beforeclose: function(event, ui)
{
// :input select all buttons, selects, textarea, checkbox
$(':input').removeAttr('checked').removeAttr('selected');
}
});
I get no errors from the console and I searched but no one seems to have the same problem.
I'll show more code if needed.
I'm not sure if it's case sensitive but in the API it's:
beforeClose
Source:
API