Using dialog it is possible multiples effects at same time? For example, in show, bounce and highlight.
I tried {effect: 'bounce', duration: 550, effect: 'highlight', duration: 550}, but only the last effect runs.
$('.modal').click(function () {
$(".dialog-modal").dialog({
modal: true,
hide: "fadeOut",
show: {effect: 'bounce', duration: 550, effect: 'highlight', duration: 550},
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
The amount of time I just spent on this makes 0 sense. And I still didn't get the result I wanted.
But this should at least help you on your way. Check da fiddle
jQueryUI:
$(document).ready(function () {
var $dlg = $('.dialog-modal');
var $mdl = $('.modal');
$dlg.dialog({
autoOpen: false,
modal: true,
dialogClass: 'sweetums',
hide: "fadeOut",
show: {
effect: 'bounce',
duration: 550
},
buttons: {
Ok: function () {
$dlg.dialog("close");
}
}
});
var $newDialog = $('.sweetums');
$mdl.click(function () {
$dlg.dialog('open');
$newDialog.effect("highlight", 550);
});
});
HTML:
<button class="modal">Click</button>
<div class="dialog-modal">some stuff</div>
If you're wondering why I made a second object for $newDialog it's because the old one was originally a div and text but when the modal is made, it expands and adds buttons. $dlg would only do the effect on the text itself and not the box as a whole, so wrapping the whole thing was necessary.
Related
I'm trying to call javascript function from jquery dialog buton, but it is not working
my code :
============================
$('#dialogAddActe').dialog({
autoOpen: false,
modal: true,
width: 800,
height:400,
show: "slide",
hide: "slide",
buttons: {
"Suivant": function() {
$(this).dialog("close");
if ($(this).checkNombre())
{
document.forms[0].dispatch.value = "ajouterActe";
document.forms[0].submit();
}
},
"Annuler": function() {
$(this).dialog("close");
document.forms[0].patientId.value="";
}
}
});
============================
$(this).checkNombre() is not working.
BR,
Med Baba
Remove $(this), just use if (checkNombre()).
I have made a JQuery Dialog, but for some reason the code which executes, when the 'ok' button is clicked is not functioning properly.
I would like there to be a “Confirm Dialog”, after a person clicks on the edit button which would fundamentally warn the user that they are going to edit something that perhaps they shouldn't be editing.
Furthermore, if the user clicks the “Ok” button, I want the edit input to be editable, whilst hiding the edit button.
Nevertheless, everything else is working the way it should. For example when users click on the close or cancel button, the dialog is closed correctly, and when users clicks on the ok button, the alert works, and the dialog is closed properly. So the only thing that isn't working correctly is the code between the alert and the dialog close.
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'fade', duration: 400 },
buttons: [
{
text: 'OK',
"class": 'showcss',
click: function () {
alert('hello');
$("#edit_input").attr("readonly", false);
$("#edit_input").focus();
$('#edit_button').hide();
$("#dialog").dialog('close');
}
},
{
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
The problem is that the property name readOnly is case sentitive.
Code using prop instead of attr:
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: {
effect: 'fade',
duration: 400
},
buttons: [{
text: 'OK',
"class": 'showcss',
click: function () {
alert('hello');
$("#edit_input").prop("readOnly", false);
$("#edit_input").focus();
$('#edit_button').hide();
$("#dialog").dialog('close');
}
}, {
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}]
});
}
The problem was that I was making the actions before closing the dialog.
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'fade', duration: 400 },
buttons: [
{
text: 'OK',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
$("#edit_input").attr("readonly", false);
$("#edit_input").focus();
$('#edit_button').hide();
}
},
{
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
For the last few hours I've been trying to have an animated dialog that will initiate a puff animation, is draggable and when closed will center again when opened. As of now I have it so the animation initiates, it's draggable but when I close and open it, it's fixed in the same position it was dragged to.
I've tried using the open function, complete function in show/hide, setting the div/dialog in a function, using position: center and yeah...
Anyway, here is the code:
frm_location.jsp:
//this is in an "a" tag, can't seem to get it to display properly
id="NEW_LOCATION_BUTTON" href="javascript:openDialog('#dialog-form','#popupBoxCancel','orange-theme','625');" class="btn_sel">
jQueryDialog.js:
function openDialog(_dialog, _cancel, _theme, _size) {
jQuery(document).ready(function ($) {
$(_dialog).dialog({
autoOpen: true,
width: _size,
modal: true,
position: "center",
resizable: false,
draggable: true,
dialogClass: _theme,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
$(_cancel).click(function() {
$(_dialog).dialog("close");
});
}
Take a look at this. I'm not sure how you're reopening the dialog, but this should do. jsfiddle code
<div id='dialog'>PUFF</div>
<button id='reopen'>OPEN DIALOG</button>
$(function () {
$('#reopen').click(function () {
$( "#dialog" ).dialog({ position: 'center'});
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: true,
width: 200,
modal: true,
position: "center",
resizable: false,
draggable: true,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
});
I need to set an alert nice message box via Jquery-UI
and then after the effects of the animation is done , and only then
to navigate to a different URL
This is the code I am using though no matter what I did try
the navigation occurs... only the UI effects does not get the chance to perform.
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).dialog("close").delay(2000).delay(800, function () {
window.location = "http://rcl.co.il";
});
}
}
});
Try bind redirect function on dialogclose event.
http://jsfiddle.net/tarabyte/tDFq3/
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).on('dialogclose', function () {
window.location = "http://rcl.co.il";
}).dialog('close');
}
}
});
I am using the code below and decided I want a close button instead of the timeout.
How can I replace the timeout with a close button with the code below?
<script type="text/javascript">
$(document).ready(function() {
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
open: function() {
// close the dialog 10 secs after it's opened
setTimeout(function() {
$(this).dialog("close");
}, 10000);
}
});
$(".notavailable").bind("click", function() {
$("#info_box").dialog("open");
});
});
</script>
You just need to add a buttons property to the Object the dialog is created with, something like:
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
buttons: [
{
text: "Close",
click: function () {
$(this).dialog("close");
}
}
]
});