在div中保留一個jQuery對話框

Question

我想創建一些jQuery對話框，但我想限制它們的位置在父div內。我使用下面的代碼來創建它們（在一個側面說明了oppacity選項不工作要麼...）：

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()); 

Answer 1

我已經找到一種方法來做到這一點。這是現在我創建對話框的方法：

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()); 

Answer 2

上述解決方案更有幫助和完整的版本。

它甚至限制了div的外部調整大小！

JavaScript已完整評論。

// 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/