I have JQuery dialog box and I have a problem to position the box on the center. Here is my code:
$.extend({
alert: function (message, title) {
$("<div></div>").dialog( {
buttons: { "Ok": function () { $(this).dialog("close"); } },
close: function (event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true,
width:'auto',
.position({
my: "center",
at: "center",
of: window
})
}).html(message);
}
});
And here is how I call my jquery dialog box:
$.alert('<div>My Dialog Box test.</div>', 'My File');
Here is my working example: https://jsfiddle.net/dmilos89/wn1fy15f/1/
Also I use jquery-ui-1.12.1 Jquery version. If anyone can help please let me know.
which version of jquery used? if you used after 1.12 , u don't need to use position in dialog properties
$.extend({
alert: function (message, title) {
$("<div></div>").dialog( {
buttons: { "Ok": function () { $(this).dialog("close"); } },
close: function (event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true,
width: '600px',
position : {
my: "center",
at: "center",
of: window
}
}).html(message);
}
});
You have an error where you are declaring the position. Also when you declared width:'auto' you need to set that to a fixed width.
Related
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 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');
}
}
]
});
}
I've got a jQuery Dialog, and would like to disable clicking on anything other than the dialog itself (i.e. no clicking in my ASPX page other than on the dialog). I have searched extensively and not found anything - can this be achieved?
This is my dialog code:
$('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
maxHeight: 300,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
Use modal true for overlay:
('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
maxHeight: 300,
modal:true,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
Simply add the parameter modal: true:
$('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
modal: true, // <---- Add this parameter
maxHeight: 300,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
This will make the dialog appear as "modal". Which means the background will get grayed out and you can't click on it until the dialog is closed.
For more information and examples on the modal parameter check:
http://jqueryui.com/dialog/#modal-confirmation
http://jqueryui.com/dialog/#modal
$('#controlSettingsForm').dialog({
autoOpen: false,
width: 'auto',
maxHeight: 300,
modal: true,
buttons: {
"Save": function () {
},
"Cancel": function () {
$(this).dialog("close");
}
},
});
$('#controlSettingsForm').dialog("open");
Please review this jsFiddle...
This is a jQuery UI dialog box utilizing an ajax request to pull up the content. I can't seem to figure out what's wrong, but nothing's popping up other than the blank dialog.
HTML...
<div id="#griffin"></div>
<ul>
<li>
</li>
</ul>
JavaScript...
$(function() {
$("#griffin").dialog({
autoOpen: true,
modal: true,
width: 950,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window },
buttons: {
"I have Read and Understand": function() {
$(this).dialog("close");
}
}
});
$(".griffin-style").on("click", function(e) {
e.preventDefault();
$("#griffin").html("");
$("#griffin").dialog("option", "title", "Loading...").dialog("open");
$("#griffin").load(this.href, function() {
$(this).dialog("option", "title", $(this).find("h1").text());
$(this).find("h1").remove();
});
});
});
Thoughts?
You must give the commands under buttons parameter.
http://jsfiddle.net/aEwUF/4/
$(function() {
$( "#griffin" ).dialog({
resizable: false,
height:150,
modal: true,
buttons: {
"I have read and understand the terms": function() {
$( this ).dialog( "close" );
$("p").html("You have accepted the terms");
//write ajax requests in here..
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
you need to add a jQuery UI dialog open function
http://api.jqueryui.com/dialog/#method-open
you will have to run this locally or on the same server since the jsfiddle cant pull your external file due to same origin policy
http://jsfiddle.net/aEwUF/7/
$(function() {
$("#griffin").dialog({
autoOpen: true,
modal: true,
width: 950,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window },
buttons: {
"I have Read and Understand": function() {
$(this).dialog("close");
}
},
// add this
open:function(event,ui){
$("#griffin").html("");
$("#griffin").load($(".griffin-style").attr("href"), function() {
$("#griffin").dialog("option", "title", $(this).find("h1").text());
$(".griffin-style").find("h1").remove();
});
}
});
$(".griffin-style").on("click", function(e) {
e.preventDefault();
$("#griffin").html("");
$("#griffin").dialog("option", "title", "Loading...").dialog("open");
$("#griffin").load(this.href, function() {
$("#griffin").dialog("option", "title", $(this).find("h1").text());
$(this).find("h1").remove();
});
});
});
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");
}
}
]
});