Geek Answers Handbook

Save jQuery dialog in div

I am trying to create several jQuery dialogs, but I would like to limit their position inside the parent div. I use the following code to create them (on the side, note that the oppacity option does not work either ...):

var d= $('<div title="Title goes here"></div>').dialog({ autoOpen: true, closeOnEscape: false, draggable: true, resizable: false, width: dx, height: dy }); d.draggable('option', 'containment', 'parent'); d.draggable('option', 'opacity', 0.45); $('#controlContent').append(d.parent());
+4
source share
2 answers

I found a way to do this. This is now my method for creating a dialog:

  var d = $('<div title="Title"></div>').dialog({ autoOpen: true, closeOnEscape: false, resizable: false, width: 100, height: 100 }); d.parent().find('a').find('span').attr('class', 'ui-icon ui-icon-minus'); d.parent().draggable({ containment: '#controlContent', opacity: 0.70 }); $('#controlContent').append(d.parent());
0
source

A slightly more useful and complete version of the above solution.

It even limits resizing outside the div too!

And JavaScript is completely commented out.

 // Public Domain // Feel free to use any of the JavaScript, HTML, and CSS for any commercial or private projects. No attribution required. // I'm not responsible if you blow anything up with this code (or anything else you could possibly do with this code). jQuery(function($) { // When the document is ready run the code inside the brackets. $("button").button(); // Makes the button fancy (ie. jquery-ui styled) $("#dialog").dialog( { // Set the settings for the jquery-ui dialog here. autoOpen: false, // Don't open the dialog instantly. Let an event such as a button press open it. Optional. position: { my: "center", at: "center", of: "#constrained_div" } // Set the position to center of the div. }).parent().resizable( { // Settings that will execute when resized. containment: "#constrained_div" // Constrains the resizing to the div. }).draggable( { // Settings that execute when the dialog is dragged. If parent isn't used the text content will have dragging enabled. containment: "#constrained_div", // The element the dialog is constrained to. opacity: 0.70 // Fancy opacity. Optional. }); $("#button").click(function() { // When our fancy button is pressed the stuff inside the brackets will be executed. $("#dialog").dialog("open"); // Opens the dialog. }); });

http://jsfiddle.net/emilhem/rymEh/33/

+8
source

More articles:


All Articles