this is the code :
$(document).ready(function(){
$("#Dialog").dialog({
title: "dialog",
width: 360,
height: 365,
modal: false,
resizable: false,
focus: function (event, ui) {
$("#ToClientID").val(ToClient);
},
open: function (event, ui) {
$(this).scrollTop(10000000000000000000000000);
}
});
});
why the div isn't scrolling to bottom when he is loaded
I think what you want is an animation, try this:
$(document).ready(function(){
$("#Dialog").dialog({
title: "dialog",
width: 360,
height: 365,
modal: false,
resizable: false,
focus: function (event, ui) {
$("#ToClientID").val(ToClient);
},
open: function (event, ui) {
$(this).animate({
scrollTop: $(this).scrollTop() + $(this).height()
});
}
});
});
Related
I want to close my modal when people click the overlay, normally u would use
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#dialog').dialog('close');
})
but i am loading my modal after i create it, so it would seem that the above code interferes with mine somehow.
this is my code so far.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can bind the event inside the open method
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
open: function(event, ui) { //added here
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
});
},
position: {
my: "center top",
at: "center top+30",
of: "body"
},
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
Okay i found the problem.
i was trying to close the dialog before it was initialized.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
open: function () {
jQuery('.ui-widget-overlay').on('click', function () {
dialog.dialog('close');
});
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
this is the code i ended up with, and this works as intended.
so to summarize, put this code inside your dialog init.
open: function() {
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
})
i have this javascript method and i want to put jquery confirmation dialog box
function editcart(id,code,stock_qw,stock_rtq,pack){
if((stock_qw%pack) != 0){
if(!x) return false;
}
}
i have this jquery dialogbox and i am bit confuse how to put it together
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true,
title: 'message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
//$('#msg').hide();
function doFunctionForYes() {
alert("Yes");
$('#msg').show();
}
function doFunctionForNo() {
// alert("No");
$('#msg').show();
}
}
anyone has better idea how this work?
What about pure JS confirmation dialog?
confirm('Yes or no? ') ? doFunctionForYes() : doFunctionFotNo();
you may try this:
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
Example:
http://jsfiddle.net/3d7QC/1032/
I am using the script below for Modal Dialog box.I have a textbox and a button under dialog box div but when i click on button textbox value remains null why ? Can anyone help please
//Everything is working fine but textboxes are losing their values on button click
$("#dialog").dialog({ modal: true });
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({
buttons: {
//'Confirm': function () {
// $("[id*=btn_Confirm_View]").click();
//},
'Cancel': function () {
$(this).dialog('close');
}
}
});
$("#dialog").dialog({ draggable: false });
$("#dialog").dialog({ closeOnEscape: false });
$("#dialog").dialog({
width: 'auto',
autoOpen: false,
show: {
effect: "blind",
duration: 1500
},
hide: {
effect: "scale",
duration: 300
}
});
$("#dialog").dialog({
close: function (event, ui) {
}
});
//Everything is working fine but textboxes are losing their values on button
I got the solution ... :)
Here is my Modified Code...
// $("#dialog").dialog({ modal: true });
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({
buttons: {
//'Confirm': function () {
// $("[id*=btn_Confirm_View]").click();
//},
'Cancel': function () {
$(this).dialog('close');
}
}
});
$("#dialog").dialog({ draggable: false });
$("#dialog").dialog({ closeOnEscape: false });
$("#dialog").dialog({
width: 'auto',
autoOpen: false,
show: {
effect: "blind",
duration: 1500
},
hide: {
effect: "scale",
duration: 300
}
});
//I Added these two lines and now they are working fine
$("#dialog").parent().appendTo(jQuery("form:first"));
$("#dialog").dialog({
close: function (event, ui) {
}
});
I'm trying to use a JQuery dialog for deletion confirmation but I cannot seem to get it to show in front of everything so that it prevents interaction with other controls until its closed.
Below is my code:
<script>
function deleteItem(id) {
$('body').append('<div id="confirm" title="Confirm Delete">' +
'<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' +
'The item will be deleted. Are you sure?</p></div>');
$(function() {
$('#confirm').dialog({
resizable: false,
height: 185,
modal: true,
show: {
effect: 'slide',
duration: 200
},
hide: {
effect: 'slide',
duration: 200
},
buttons: {
'Delete': function() {
//Deletion code
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
};
</script>
Please help. Thank you.
change accordingly.
modal:false - for bring dialog as normal alert.
modal:true - it brings dialog front of the page.
See this example. Demo
$('<div></div>').appendTo('body')
.html('<div><h6>Yes or No?</h6></div>')
.dialog({
modal: true,
title: 'message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function () {
item.remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
UPDATED
Ok. so you need finally this.
.ui-widget-overlay {
background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
opacity: 2;
filter: Alpha(Opacity=30);
}
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,
},
});
});