Customizing dialog box to a specific position

Question

enter image description here As you can see 3 images Screenshot1.png , Screenshot2.png , Screenshot3.png . Here in screenshot1 , when you click on "Create Iteration" then a dialog box is created but its place is not at right position i.e screenshot2.png . I want to customize its place as you could see in Screenshot3.png . As i have tried to fix its position by giving position[200,380] and its works fine but for small screens like laptops its position gets disturbed. So is it possible to customize it place and position so that when i create a dialog box it is created as you could see in screenshot3.png1

I want that when the dialog box is created then its should always be opened inside "ITERATION PAGE" .here Iteration 1 is my dialog box. Basically if u see my code then you could guess what i want.

Code Here [jsfiddle.net/coolanuj/7683X/46/]

I can only see 2 images and dude I seriously didn't understood your question and can't get anything from the images you shared — Mr. Alien, Nov 11 '12 at 10:38
@PranavKapoor : can u please help me getting a answer of my question because till now no has answered my following question Please check my link : [http://stackoverflow.com/questions/13309522/drag-and-drop-of-dialog-box-with-clone] — Little bird, Nov 11 '12 at 11:09
@Mr.Alien : please help me getting the answer . [ http://stackoverflow.com/questions/13309522/drag-and-drop-of-dialog-box-with-clone ] — Little bird, Nov 11 '12 at 11:10

charlietfl · Accepted Answer · 2012-11-11T11:50:28.693

1

What you will need to do is create the array for position array dynamically based on the offset() of the element in page you want to position it over.

Following is some demo code that creates dynamically positioned dialog based on following simple html:

HTML

<div class="col"><button>Open Dialog</button></div>
<div class="col"><button>Open Dialog</button></div>
<div class="col"><button>Open Dialog</button></div>

JS:

/* how much to offset from the main element*/
var dialogOffset = {
        top: 50,
       left: 10
}

$('button').click(function() {
    var $parent = $(this).closest('div.col');
    var parentPos = $parent.offset()
/* create position array for new dialog*/
    var dialogPosition = [parentPos.left + dialogOffset.left, parentPos.top + dialogOffset.top];

    var parentIndex = $('.col').index($parent)

    $('<div>').dialog({      
         position:  dialogPosition,
        width: 150,

        title: 'Column '+(parentIndex+1) ,
        close: function() {
            $(this).remove()
        }
    })
})

DEMO:

Full Page: http://jsfiddle.net/CPtp4/show/

Code View: http://jsfiddle.net/CPtp4/

It will depend a bit on your application as to when you set the position since there are different setups for using dialog. You can set the position every time you open a dialog in this manner:

/* iniitalize dialog on page load*/
$('#dialog').dialog({
    autoOpen:false

});

$('#myButton').click(function(){
     var pos=$('#myDiv').offset();
     var dialogPos=[pos.left, pos.top];
     $('#dialog').dialog('option','position',dialogPos).dialog('open')

})

edited Nov 11 '12 at 11:50

answered Nov 11 '12 at 11:44

charlietfl

164,229
13
110
143

here is one more question .Kindly help me in getting an answer for this , [http://stackoverflow.com/questions/13309522/drag-and-drop-of-dialog-box-with-clone] – Little bird Nov 11 '12 at 12:13
1

I don't think you understand how dialog works. They each get appended to `body` not within any other element. If you need to be able to drop them into other elements you should consider creating your own elements and use sortable or draggable/droppable methods. You can style the elements to look like dialog. Look at this portlet demo:http://jqueryui.com/sortable/#portlets – charlietfl Nov 11 '12 at 12:20
you are right . I'm very new to jqueryui as well as in IT industry .So i'm facing little problems .I'm still wondering how to complete this assignment in very short span of time. But i'm sure i'vl learn it very soon :) thanx :) – Little bird Nov 11 '12 at 12:30
1

dialog is easy to implement... I think what you want will be considerably more complex. One thing that will help a lot is learn how to inspect live html in a browser console. When all these scripts modify elements, you can see the live updated DOM.. and inspect all the classes used, widget html structure etc. This will help learning curve a lot – charlietfl Nov 11 '12 at 12:31
As in your link [http://jsfiddle.net/CPtp4/show/] when you click on "Open Dialog" you get a dialog box named "column 1" . Is it possible to get another Dialog box named "column 2 " on the second click of "Open Dialog" button just below to Dialog box to "column 1" ? – Little bird Nov 11 '12 at 12:44
yes but not exactly sure how you want it to work. My simple demo will create as many dialogs as clicks if you don't close any of them. They are all on top of each other currently since th position is the same – charlietfl Nov 11 '12 at 12:51
1

new demo...keep clicking any button and don't close any dialog http://jsfiddle.net/CPtp4/1/. Then close dialogs and should start from beginning – charlietfl Nov 11 '12 at 13:01
Superb ,Awesome :) The same i was asking :) But dialog boxes are overlapping each other. Did u notice that ? Can't be opening of dialog boxes be just below to one another i.e means row wise ? – Little bird Nov 11 '12 at 13:14
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/19403/discussion-between-anuj-and-charlietfl) – Little bird Nov 11 '12 at 18:26

Customizing dialog box to a specific position

1 Answers1