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
Related
In my project I've a draggable page and on top of it I've popped a dialog and made it draggable. But somehow the dialog is not dragging. I dont know why it is happening.
dragging symbol is shown but the dialog is not moving why? Can you explain how to make a dialog draggable? Please do Help
This is dialog code:
$dlgLibrary = $('<div style="overflow-y:hidden;color:#FBFBEF"" id="eBLibrary"></div>')
.dialog({
autoOpen: false,
title: 'Browse & Select',
maxWidth:1000,
maxHeight: 600,
width: 800,
height: 600,
dialogClass: "alertDialog",
modal: true,
closeOnEscape: true,
canMaximize:true,
draggable: true,
resizeHt: 0,
resizeWd: 0,
resizeStop: function(event, ui) {
if (resizeHt== 0 && resizeWd== 0) {
resizeHt = $dlgLibrary.dialog( "option", "height" );
resizeWd = $dlgLibrary.dialog( "option", "width" );
};
$('#eBLibrary-Show').width(Number(resizeWd-(resizeWd*16/100)));$('#eBLibrary-Show').height(Number(resizeHt-(resizeHt*35/100)));
resizeHt= 0;
resizeWd= 0;
},
open: function(event, ui) {
}
$.ajax({ url: './Library.html',
success : function(data) {
},
buttons: libButtons,
close: function() {
});
i have a problem with close method of fancybox v2.0.6
I have in my page this code.
Aggiungi immagine
<script type="text/javascript">
$(document).ready(function() {
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
afterClose: function() {
$('#imgqueue').load('myurl2')
}
});
});
</script>
When i click on a tag the fancybox popup show mypage, where i have a form; when i submit the form on the popup, i show another form e after, submit it, i will close by this function:
<script type="text/javascript">
parent.$.fancybox.close();
</script>
Note: myurl and myurl2 not are variables but link to my site that i have hidden
And it's ok; but if i click again on a tag the popup show the form but on submit the popup don't close. Why? The code is equal. i Don't understend....
It's a fancybox bug?
Thanks for the answers and sorry for my poor english
use onclosed method for close popup
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
'onClosed' : function () { self.parent.location.reload(); }
}
});
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');
});
});
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']);
});
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