Question

JS

 $('#CreateUserModal').modal({
     keyboard: true,
     backdrop: 'static'
 });

HTML

<div id="CreateUserModal" class="modal fade hide">
    @{Html.RenderPartial("Partials/CreateUserPartial", new CreateUserModel());}
</div>

The Partial

@using (Ajax.BeginForm("CreateUser", "User", null, options, new { style = "margin-bottom:0;" }))
{
    <div style="padding: 20px;">
    <div style="text-align: right; font-size: .7em;">Press Esc to Close</div>
    <h2>New User</h2>
    @Html.LabelFor(m => m.UserName)
    @Html.TextBoxFor(m => m.UserName, new { })
    @Html.ValidationMessageFor(m => m.UserName)
    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password, new { })
    @Html.ValidationMessageFor(m => m.Password)
    @Html.LabelFor(m => m.Email)
    @Html.TextBoxFor(m => m.Email, new { })
    @Html.ValidationMessageFor(m => m.Email)
    </div>
    <div class="form-actions" style="margin-bottom:0;">
        <input class="btn btn-primary" type="submit" value="Save" />
    </div>
}

For some reason, as soon as this page loads the modal pops up. I can dismiss it and everything works fine. I would just expect it to start out hidden. I recently upgraded to the latest bootstrap and that is when I noticed this issue.

Ideas?

Answer 1

Isn’t this code:

 $('#CreateUserModal').modal({
     keyboard: true,
     backdrop: 'static'
 });

opening your modal?
I thought you only needed to call the modal-function when you wanted the modal to popup?

UPDATE

If you inspect the twitter bootstrap javascript for the modal, it confirms that upon creation it opens the modal:

 $.fn.modal = function ( option ) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('modal')
        , options = typeof option == 'object' && option
      if (!data) $this.data('modal', (data = new Modal(this, options)))
      if (typeof option == 'string') data[option]()
      else data.show()
    })
  }

I guess you can tweak this a bit, but the toggle/hide is if you already have a modal created I presume.

In your code I would rather just go with the html-markup method:

<a class="btn fade" data-toggle="modal" href="#CreateUserModal" >Launch Modal</a>

That will do all the boilerplate for you, providing a link which launches the modal.