CODEWITHSUNDEEP
jqueryjquery-uimodal-dialog
user1958218
user1958218

Reputation: 1621

jquery ui dialog change position after first click

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

Upvotes: 1

Views: 4708

Answers (3)

Bryan Ga
Bryan Ga

Reputation: 1

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) {
    },
});

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

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

Upvotes: 1

mck
mck

Reputation: 988

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/

Upvotes: 0

Related Questions