25957

JQuery UI Dialog Positioning Center of Parent

Question:

I have a functioning snippet as follows...

function LoadTheDialog($url) { $dialog = $('<div></div>'); $dialog.html('<iframe id="theDialog" src="' + $url + '" width="530px" height="600px" style="border: 0px;"></iframe>'); $dialog.dialog({ width: 555, modal: true, resizable: false, draggable: false, open: function (type, data) { $($dialog).parent().appendTo("body"); } }).dialog('widget').position({ my: "center", at: "center", of: window, collision: "none" }); };

no matter what I have tried thus far, the dialog always shows up at top left of the browser...

Am I missing something obvious?

I would also like to bag the static width & height and have it auto size to the size of the loaded remote content but those options do not seem to work as anticipated either...

thanks in advance.

Answer1:

ok solved.

You need to call you dialog like this:

window.parent.jQuery(>>the html or variable of your dialog<<).dialog({ >>the options<< });

so that way it gets appended to the parent document and gets back to normal positioning.

Answer2:

Have you tried to also set the height in the jQuery UIDialog. <br /> I fixed the problem by setting the height and width of the dialog to the same of the iFrame.

Answer3:

I solved this issue using <a href="https://stackoverflow.com/questions/15955595/jquery-ui-dialog-inside-of-an-iframe" rel="nofollow">this solution</a>:

position: {my: "center", at: "center", of: window.top}

Recommend

  • How to drag image clone after drop.?
  • JSeperator in JToolBar moves the components to right end
  • jQuery UI Dialog resize helper
  • Draw a bitmap from a control taller than the screen
  • Very basic javascript function call
  • jQuery UI .sortable() call is slow when applies to thousands of elements
  • Setting UIToolbar background image with iOS5.1
  • jQueryUI dialog replacement for confirm?
  • CSS: How to fix overlapping divs
  • Jquery resizable reposition handle after scroll
  • How to remove all of a jQuery UI dialog when it is closed
  • How can I make this modal persistent?
  • Plotting densities in R
  • Update Google Maps traffic layer without page reloading
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Installing iPhone App to iPhone
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Change JButton Shape while respecting Look And Feel
  • How to redirect a user to a different server and include HTTP basic authentication credentials?
  • Can I make an Android app that runs a web view in Chrome 39?
  • jquery mobile loadPage not working
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • JTable with a ScrollPane misbehaving
  • How do I configure my settings file to work with unit tests?
  • embed rChart in Markdown
  • How to stop GridView from loading again when I press back button?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • LevelDB C iterator
  • Linking SubReports Without LinkChild/LinkMaster
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app