jQuery UI Dialog Box Position

Question

I have a form that is taller than the screen height. When the user submits the form, a dialog box pops up and asks and confirms their password via AJAX. My problem is that the dialog box always appears at the very bottom of the screen, even when using the jQuery code below, which I believe is correct.

<div id="passConfirmBox">
    <p class="confirmError">Invalid password, try again</p>
    <p><input type="password" name="passwordField" id="passwordField" value=""></p>
    <button type="button" id="passConfirmButton">Confirm Password</button>
</div>

var passConfirm = $("#passConfirmBox").dialog( { title: "Confirm Your Password", 
autoOpen: false, position: { my: "center", at: "center", of : window } });

Answer 1

try this:

var myPos = { my: "center top", at: "center top+150", of: window };

your complete script:

 <script>
    $(function() {
        var myPos = { my: "center top", at: "center top+150", of: window };
    var passConfirm = $("#passConfirmBox").dialog( { title: "Confirm Your Password", 
        autoOpen: true, position: myPos});// autoOpen is set to true to test you can change it to your use.

    });

    </script>
  </head>

  <body>
  <div id="passConfirmBox">
    <p class="confirmError">Invalid password, try again</p>
    <p><input type="password" name="passwordField" id="passwordField" value=""></p>
    <button type="button" id="passConfirmButton">Confirm Password</button>
</div>

jQuery UI Dialog Box Position

Question

1 answers

solution1
1 ACCPTED 2014-12-01 13:17:19

jQuery UI Dialog Box Position

Question

1 answers

solution1 1 ACCPTED 2014-12-01 13:17:19

solution1
1 ACCPTED 2014-12-01 13:17:19