jquery-ui-dialog

How do I set the containment on a jQuery UI Dialog?

由 故事扮演 提交于 2019-11-27 16:42:02
问题 Is it possible to add containment (confining to the boundary of another element) to jQuery UI's Dialog? 回答1: You could target the dialog box and apply a containment to it. Try this: var container = $('.dialog-container'), dialog = $('.ui-dialog'); // get container top left corner locations var cx1 = container.offset().left, cy1 = container.offset().top; // get dialog size var dw = dialog.outerWidth(), dh = dialog.outerHeight(); // get container bottom right location, then subtract the dialog

Click outside non-modal dialog to close

由 二次信任 提交于 2019-11-27 15:14:31
问题 Per my previous research, I've been able to figure out how to trigger a live click event on the overlay around a dialog to close the dialog. However, that restricts further development of this dialog feature to being modal. If I set the dialog to non-modal, there is no overlay to trigger the click event. How can I set up the dialog (which is now not modal) to close when I click outside it without using the overlay click event? Here is my dialog and the subsequent live click event that allows

jQuery UI dialogs: how to close dialog when click outside?

由 帅比萌擦擦* 提交于 2019-11-27 15:14:29
问题 In docs I didn't see such information. There are options to close dialog in such cases: 1) push Esc; 2) click on "OK" or "Close" buttons in the dialog. But how to close dialog if click outside? Thanks! 回答1: Here are 2 other solutions for non-modal dialogs: If dialog is non-modal Method 1: method 1: http://jsfiddle.net/jasonday/xpkFf/ // Close Pop-in If the user clicks anywhere else on the page jQuery('body') .bind( 'click', function(e){ if( jQuery('#dialog').dialog('isOpen') && !jQuery(e

jQuery dialog popup

由 巧了我就是萌 提交于 2019-11-27 14:32:25
问题 I am trying to get this dialog popup form to show up when this link is clicked but it does not work for me. I've been working on this for the past three hours and this is getting too frustrating for me. Here's my HTML: <a href="#" id="contactUs">Contact Us</a> <div id="dialog" title="Contact form"> <p>appear now</p> </div> And here's my JavaScript, this is in an external file: $("#contactUs").click(function() { $("#dialog").dialog("open"); return false; }); I've used these links, but to no

Custom CSS scope and jQuery UI dialog themes

由 谁说胖子不能爱 提交于 2019-11-27 14:13:20
问题 I am using multiple jQuery UI dialog themes on a single page, and I have bug. [jQuery 1.3.2] [jQuery UI 1.7.2] Here is a screenshot (vs custom CSS scope ): Alone on the page 1) vs native 2) How can I fix this? 回答1: I hit the same problem today. It seems that any dialog you create is taken out of its current hierarchy and placed at the end of the body element, which means that it isn't covered by a custom CSS scope. The "dialogClass" option is of no help as well, since it sets the class of the

jQuery UI Dialog Buttons from variables

由 萝らか妹 提交于 2019-11-27 13:38:39
问题 I have variables holding the translated labels for buttons inside a jquery ui dialog. I cannot fill the button array key with the variable itself, and can't find any way to let it treat my variable just as string. translations['ok'] = 'ok'; translatinos['cancel'] = 'cancel'; // not working jQuery('#foo').dialog({ buttons: { translations['ok']: function() { alert('foo-ok'); }, translations['cancel']: function() { alert('foo-cancel'); } } }); // working jQuery('#bar').dialog({ buttons: { "Ok":

Automatically resize jQuery UI dialog to the width of the content loaded by ajax

由 不羁的心 提交于 2019-11-27 10:30:41
I'm having a lot of trouble finding specific information and examples on this. I've got a number of jQuery UI dialogs in my application attached to divs that are loaded with .ajax() calls. They all use the same setup call: $(".mydialog").dialog({ autoOpen: false, resizable: false, modal: true }); I just want to have the dialog resize to the width of the content that gets loaded. Right now, the width just stays at 300px (the default) and I get a horizontal scrollbar. As far as I can tell, "autoResize" is no longer an option for dialogs, and nothing happens when I specify it. I'm trying to not

How to completely remove a dialog on close

由 删除回忆录丶 提交于 2019-11-27 10:24:29
When an ajax operation fails, I create a new div with the errors and then show it as a dialog. When the dialog is closed I would like to completely destroy and remove the div again. How can I do this? My code looks something like this at the moment: $('<div>We failed</div>') .dialog( { title: 'Error', close: function(event, ui) { $(this).destroy().remove(); } }); When I run this the dialog box shows up correctly, but when I close it the dialog is still visible in the html (using FireBug). What am I missing here? Something I have forgotten? Update: Just noticed my code gives me an error in the

jQuery UI dialog button text as a variable

由 不问归期 提交于 2019-11-27 10:14:04
问题 Can anyone tell me how can i use a variable for button text in jQuery UI dialog? I want to make a dynamic button name. 回答1: This won't work because of the way jQuery handles the button name (can be with or without quotes) This will work: var button_name = 'Test'; var dialog_buttons = {}; dialog_buttons[button_name] = function(){ closeInstanceForm(Function); } dialog_buttons['Cancel'] = function(){ $(this).dialog('close'); } $('#instanceDialog').dialog({ buttons: dialog_buttons }); 回答2: What

jQuery, MVC3: Submitting a partial view form within a modal dialog

由 对着背影说爱祢 提交于 2019-11-27 06:13:45
问题 I'm just playing around with jQuery and MVC3 at the moment, and am wondering how I can submit a form, which has been dynamically loaded into a jQueryUI dialog? My code so far consists of... Javascript/jQuery $(document).ready(function () { $('.trigger').live('click', function (event) { var id = $(this).attr('rel'); var dialogBox = $("<div>"); $(dialogBox).dialog({ autoOpen: false, resizable: false, title: 'Edit', modal: true, show: "blind", hide: "blind", open: function (event, ui) { $(this)
订阅 jquery-ui-dialog