jquery ui dialog change position after first click

Question

I am using jquery uimodaldialog and this is setting

$("#dialog").dialog({
    autoOpen : false,
    minWidth : 700,
    show : {
        effect : "fade",
        duration : 1000
           },
    hide : {
        effect : "fade",
        duration : 1000
           },
    close : function(event, ui) {
    },
});

I am calling with this

 $('.mylink').on('click', function() {
 $( "#dialog" ).dialog( "open");

Now on first click it shows at center of page .

if I click again then it goes about 200px upwards.

On further clicking it says there

Does the content of $( "#dialog" ) element changes in between? — Foreever
– Foreever, Commented Jan 7, 2015 at 7:17

Tushar Gupta - curioustushar · Accepted Answer · 2013-06-27 05:39:35Z

1

HTML

<input type="button" class="mylink" />
<div id="dialog">Hello</div>

jQuery

$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: false,
        minWidth: 700,
        show: {
            effect: "fade",
            duration: 1000
        },
        hide: {
            effect: "fade",
            duration: 1000
        },
        position: {
            my: "center",
            at: "center",
            of: window
        },
        close: function (event, ui) {},
    });
    $('.mylink').on('click', function () {
        $("#dialog").dialog("open");
    });
});

Working Demo http://jsfiddle.net/cse_tushar/k4LLM/1/

Reference http://api.jqueryui.com/dialog/#option-position

answered Jun 27, 2013 at 5:39

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1958218 Over a year ago

i don't know but i tried same coding puting in my files. First time it displays at correct position but next time display about 200px upwards. any idea which thing have been iterfering

user1958218 Over a year ago

can i add position with .dialog('open') so that i gets value from there not from default

Tushar Gupta - curioustushar Over a year ago

click here this might help you

mck · Accepted Answer · 2013-06-27 04:24:41Z

0

You can fix the position of dialog by following code

$("#dialog").dialog({
autoOpen : false,
minWidth : 700,
position: { 
    my: 'top',
    at: 'top',
    of: $('#some_div')
  }
show : {
    effect : "fade",
    duration : 1000
},
hide : {
    effect : "fade",
    duration : 1000
},
close : function(event, ui) {
},
});

You can find help about jquery position at http://api.jqueryui.com/position/

answered Jun 27, 2013 at 4:24

mck

9883 gold badges14 silver badges39 bronze badges

3 Comments

user1958218 Over a year ago

i try that but first time postion is right like defined , then next time is upwards than previous position

mck Over a year ago

what value you have set for my , at and of ?

user1958218 Over a year ago

same as yours , is there any way to add postion with dailog.open

Bryan Ga · Accepted Answer · 2019-03-26 06:44:20Z

0

If you have dynamic height of contents in it. I think dialog can be changed second click. for solving it, use height option of dialog.

$("#dialog").dialog({
    autoOpen : false,
    minWidth : 700,
    height : 500, //it should be size of your contents
    show : {
        effect : "fade",
        duration : 1000
           },
    hide : {
        effect : "fade",
        duration : 1000
           },
    close : function(event, ui) {
    },
});

answered Mar 26, 2019 at 6:44

Bryan Ga

1

Collectives™ on Stack Overflow

jquery ui dialog change position after first click

3 Answers 3

HTML

jQuery

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

HTML

jQuery

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related