Question

In my ASP.NET Web Forms Page I have a ModalPopupExtender that is shown by JavaScript:

$.ajax({
    // full ajax request shortened
    type: "POST",
    success: function (msg) {
        $("#profileTitleLabel").html(msg.d.TitleEncoded);
        $("#profileTextLabel").html(msg.d.BodyEncoded);

        $find('profileTextModalPopupExtender').show();
    },
    error: function (jqXHR, textStatus, errorThrown) {
    }
});

It is neither centered nor sized the first time, but on subsequent calls it is fine (in Chrome, Firefox and IE9). I guess it has to do with a postback that is done on closing it (UpdatePanel partial update).

Now how can I trigger sizing by hand to get it to correct size the first time without using a server side call to Show? I tried calling initialize before show, and I browsed through the client object’s methods, but I have not found a solution yet.

Here are the styles that matched to the popup’s div:

height: auto;    // matched css classes
width: auto;
max-height: 80%;
max-width: 90%;
min-width: 50%;
overflow: auto;
padding: 10px;
position: fixed; // element CSS
z-index: 100001;
left: 160.5px;
top: 157.5px;

Answer 1

I found workaround that makes the popup to appear correctly:

$find('profileTextModalPopupExtender').show();
$find('profileTextModalPopupExtender')._layout();
$find('profileTextModalPopupExtender').show();

I agree there’s a code smell in this. I could not find a better solution, however (I’m still open to suggestions). I especially dislike that _layout is invoked three times, once by myself and twice (in a row!) by show.