Following is my JS:
ShowHoverServerImageModalWindow: function () {
$("#divSettings").dialog({
width: 200,
height: 200,
modal: false,
title: "Server Image",
autoOpen: false,
closeOnEscape: true,
draggable: false,
resizeable: false,
/*position: "my position!!", */
buttons: [
{
text: "Close",
click: function () { $(this).dialog("close"); }
},
]
});
//Show the dialog
$("#divSettings").dialog('open');
},
I want the modal to be opened where my curser is at
How can i do that?
source: http://jqueryui.com/demos/dialog/ and http://docs.jquery.com/Tutorials:Mouse_Position
$("#divSettings").dialog({
... //your previous code
position: [e.pageX, e.pageY]
});
Easily found on google.
or just before you trigger the pop-up:
EDIT: now include the trigger.
$(document).click(function (e) {
$("#divSettings").dialog('option', 'position', [e.pageX, e.pageY]);
$("#divSettings").dialog('open');
});
Related
I open a jQuery Modal Dialog. I open a second Modal Dialog after the first one closes. When the second one closes I cannot interact with my page any more. Seems that there is some modal dialog still alive.
Can someone help?
Thanks
function modalFirst_Set() {
$('#modalFirst').dialog({
autoOpen: false,
dialogClass: 'DynamicDialogStyle',
resizable: true,
draggable: true,
modal: true,
width: 400,
height: 120,
title: "My First Modal",
open: function (type, data) {
var Page = 'PageFirst.aspx';
$('#modalFirst').load(Page);
},
close: function (event, ui) {
var retValue = $('#modalFirst_RetValue').val();
if (retValue=='X')
modalSecond_Show();
$(this).dialog('destroy');
modalFirst_Set();
}
});
}
function modalSecond_Set() {
$('#modalSecond').dialog({
autoOpen: false,
dialogClass: 'DynamicDialogStyle',
resizable: true,
draggable: true,
modal: true,
width: 400,
height: 120,
title: "My Second Modal",
open: function (type, data) {
var Page = 'PageSecond.aspx';
$('#modalFirst').load(Page);
},
close: function (event, ui) {
$(this).dialog('destroy');
modalSecond_Set();
}
});
}
No problem with this code. The problem was inside the pageSecond.aspx file.
I am creating a dialog in javascript and for some reason when I first open the dialog the buttons works fine. But when I close and open it the buttons dont work. The edit click function doesnt work the second time when I repopen the dialog
var newDiv = $(document.createElement('div'));
$(newDiv).dialog({
title: "New Dialog",
modal: true,
autoOpen: true,
width: 650,
height: 440,
resizable: false,
draggable: true,
buttons: [
{
html: "<b>Edit</font></b>",
icons: {
primary: "ui-icon-check"
},
click: function() {
$('#notetext').prop("disabled", false);
$('#uibtnSubmit').button("enable");
//$('#uibtnSubmit').prop("disabled", false);
//$("#uibtnSubmit").button().attr('disabled', false).removeClass('ui-state-disabled');
}},
{
html: "<b><font color='green'>Submit</font></b>",
disabled:true,
id: "uibtnSubmit",
icons: {
primary: "ui-icon-script"
},
click: function() {
var editnotes = $('#notetext').val();
//update the notes in the database against the user.
$.ajax({
type: "post",
cache: false,
async: false,
url:"url",
datatype: "json",
data: data,
success: function(data){
$(newDiv).dialog('close');
},
error: function(jqXHR, statusText, err){
//console.log(err);
}
});
}},
{
html: "<b><font color='red'>Exit</font></b>",
icons: {
primary: "ui-icon-cancel"
},
click: function() {
$(this).dialog('close');
}
}
]
});
I tried to use different properties like removeClass, attr but they arent working.
I solved the issue by reloading the page once Exit or submit value was clicked. That way when the dialog box was reloaded it was initialized.
I am working on MVC Views.
I want a pop up window after adding portal details,'Portal details' pop up is not working
and also want to reload grid with data.
$("#addPortalDetails").dialog({
resizable: false,
autoOpen: true,
height: 140,
width: 300,
title:"Portal Details",
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
//reload grid with data
}
}
});
Thanks in advance
To reload grid and and popup window the code is
$("#addPortalDetails").dialog({
resizable: false,
autoOpen: true,
height: 140,
width: 300,
title: "Portal Details",
modal: true,
dialogClass: "noclose",
buttons: {
Ok: function () {
$(this).dialog("close");
$("#your_grid_id").setGridParam({datatype:'json'}).trigger('reloadGrid', [{ page: 1 }]);
}
}
});
When I click on the link 'alert' then the message will only popup once, which is correct. Strangely if I click on the link 'dialog' and then on the link 'alert' then the message is popping up twice consecutively, which is incorrect.
How can I fix this so that the message will only be displayed once?
HTML
<p id="test">alert</p>
dialog
jQuery
$(function() {
$("p#test a").click(function() {
alert('alert');
});
}
function showDialog(){
$("<div class='popupDialog'>Loading...</div>").dialog({
closeOnEscape: true,
height: 'auto',
modal: true,
title: 'About Ricky',
width: 'auto'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}
You can try this script.
<script type="text/javascript">
$(document).ready(function () {
$("p#test a").click(function () {
alert('alert');
});
});
function showDialog1() {
$("<div class='popupDialog'>Loading...</div>").dialog()({
closeOnEscape: true,
height: 'auto',
modal: true,
title: 'About Ricky',
width: 'auto'
}).bind('dialogclose', function () {
$(this).dialog('destroy');
});
}
<script>
I do get that we easily can set the Close button text to a variable, using closeText option
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel, // <-----
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
but how about a custom name?
this does not work :(
var btnResetMapping = 'Reset Mapping';
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Close: function() {
$(this).dialog('close');
},
btnResetMapping: function() { // <-----
// logic here
},
}
});
This can be seen as weird question, but my variable, in the code is:
var btnResetMapping = '<%= Resources.PARbuttons.btnResetMapping %>';
witch is loaded correctly from the Global Resources file, with the correct sentence for the applied localization.
it works fine using:
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Close: function() {
$(this).dialog('close');
},
'<%= Resources.PARbuttons.btnResetMapping %>': function() { // <-----
// logic here
},
}
});
But I'm refactoring this as place the javascript file in it's own place (alone file), and I want to, not only do this way (separate HTML from Javascript - It's a Business Web Aplication that is always loaded from the INTRANET, never using Internet btw) but to understand it.
Thank you.
You can use bracket notation, like this:
var myButtons = { Close: function() { $(this).dialog('close'); } };
myButtons[btnResetMapping] = function() { ...logic here... };
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: myButtons
});
Just make sure btnResetMapping is defined before this code runs and you're all set :)