Okay, don't laugh, but my friend gave me a fix to a jQuery UI code before I asked for another fix here, and now I have no idea how to combine the two. I'm a total n00b so please help me out here. I tried, but keep getting a syntax error?
I need to merge this (I think it goes right after title):
beforeClose: function(){ $(this).remove(); }
Into this:
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
Can anyone please help? Thanks.
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features', //don't forget the comma
beforeClose: function(){ $(this).remove(); } //placed here
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
Related
Whenever I click on an div container a Jquery dialogs opens. Everything works smooth expect for the safari browser. For some weird reason when I scroll down it bugs and I dont know what i'm doing wrong.
I hope someone can help me with this issue.
video of the issue: https://streamable.com/89k8b
Jquery dialog:
$(window).resize(function() {
$(".dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});
$(document).ready(function(){
$( ".dialog" ).dialog({ dialogClass: 'fixed-dialog', autoOpen:false});
});
var opt = {
autoOpen: false,
closeText: '<?php echo $lang["23"]; ?>',
width: 950,
height: 600,
title: null,
draggable: false,
modal: true,
create: function (event) { $(event.target).parent().css({ 'position': 'fixed', 'z-index': '10', 'top': '50%', 'margin-top': '-350px', 'left': '50%;', 'margin-left': '-1000px' }); },
buttons:
[
{
text: "<?php echo $lang["44"]; ?>",
click: function()
{
$('.dialog').dialog('close');
}
}
]
}
jQuery(function () {
jQuery('.dialog').dialog(opt);
})
html:
<div onclick="$('#dialog-<?php echo $hotel['ms_id']; ?
>').dialog('open').dialog(opt)
Change
position: 'fixed'
to
position: 'absolute'
This should solve your problem
Im trying to use dialog() and it's working, but I have to click two times for the dialog text to open. My latest test was adding return false; after jQuery(this).dialog("close");.
jQuery("#divId").on('click', function() {
jQuery("divclass").dialog({
autoOpen: true,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {jQuery(this).dialog("close");return false;}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The definition of the jQuery dialog should be outside the click listener.
also, if you want to open it on click event, you should change the autoOpen to false.
$("#divId").on('click', function() {
$(".divclass").dialog( "open" );
});
$(".divclass").dialog({
autoOpen: false,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {$(this).dialog("close");return false;}
}
});
$(function () {
$('#modalDlg2').live("click", function (event) {
event.preventDefault();
loadDialog(event, "/User/Create");
});
function loadDialog(event, target) {
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.load(target)
.dialog({
title:"Novo utilizador",
modal: true,
autoOpen: false,
width: 600,
show:'fade',
hide:'fade',
minHeight: 400,
resizable: false
});
$dialog.dialog( "option", "buttons", {
"Cancelar": function() {
$(this).dialog("close");
$(this).empty();
} });
$dialog.dialog('open');
}
})
I have a problem with my close button "Cancelar" it should close the modal dialog and then empty it, but it seems that $(this).dialog("close") does not work, and .empty() does.
I've looked everywere for the solution of my problem. Could anyone help me with this?
try this:
$dialog.dialog( "option", "buttons", {
"Cancelar": function() {
$dialog.dialog("close");
$(this).empty();
}
});
$dialog.dialog('open');
or
$dialog.dialog( "option", "buttons", {
"Cancelar": $.proxy(function() {
$(this).dialog("close");
$(this).empty();
},this)
});
$dialog.dialog('open');
I would try putting this in a callback function for the load:
$(function() {
$('#modalDlg2').on("click", function(event) {
event.preventDefault();
loadDialog(event, "/User/Create");
});
function loadDialog(event, target) {
var $dialog = $('<div></div>');
$dialog.empty();
$dialog.load(target, function() {
$dialog.dialog({
title: "Novo utilizador",
modal: true,
autoOpen: false,
width: 600,
show: 'fade',
hide: 'fade',
minHeight: 400,
resizable: false
});
$dialog.dialog("option", "buttons", {
"Cancelar": function() {
$(this).dialog("close");
$(this).empty();
}
});
$dialog.dialog('open');
});
});
Try the following code:
$dialog.dialog("option", "buttons", { "Cancelar": function() { $(this).remove(); } });
Could someone please tell me what is up with this code? I can't for the life of me see whats stopping it from working. If I set it to autoOpen: true it works, but getting it to open from the button does not seem to work! Many thanks in advance.
Jquery:
$(document).ready(function () {
$("#pextension").load('tour_extension_lb.aspx').dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
});
$('a.extension-link').click(function () { $('#pextension').dialog('open'); return false; });
});
html:
OPEN EXTENSION DIALOG
<div id="pextension" class="dialogBox" style="display:none;"></div>
try by changing your code
function opendialog(){
$("#pextension").dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
open: loaddialogcontent();
});
}
function loaddialogcontent(){
$("#pextension").load('you file to load');
}
$(document).ready(function () {
$('a.extension-link').click(opendialog);
opendialog();
});
Try:
$(document).ready(function () {
$("#pextension").dialog({
bgiframe: true,
autoOpen: false,
position: 'center',
width: 440,
height: 300,
modal: true,
open: function() {
$(this).load('tour_extension_lb.aspx');
}
});
$('a.extension-link').click(function (e) {
e.preventDefault();
$('#pextension').dialog('open');
});
});
I tried different ways to do this but i cant get it work. this is the code:
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#category_edit_dialog").dialog({
width: 960,
hide: 'slide',
position: 'top',
show: 'slide',
close: function(event, ui) { redirect here? how? }
});
});
});
Thanks dekomote for helping me. At his advice i solved the problem: here is the full working code:
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#category_edit_dialog").dialog({
width: 960,
hide: 'slide',
position: 'top',
show: 'slide',
close: function(event, ui) { location.href = 'url here' }
});
});
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#category_edit_dialog").dialog({
width: 960,
hide: 'slide',
position: 'top',
show: 'slide',
close: function(event, ui) { window.location.href = "page.html"; }
});
});
});
where "page.html" is the page you wish to redirect to on close