CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Jason
Jason

Reputation: 11615

Twitter Bootstrap Modal Shows Up on Initialization

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?

Upvotes: 8

Views: 23535

Answers (4)

user1152113
user1152113

Reputation:

For Bootstrap 2.0

Set the "show" option to false like this.

$('#myModal').modal({show: false});

Yngve B. Nilsen's is correct that the after initialization modal opens by default. See bootstrap modal documenation under options

Upvotes: 13

Patrick Berkeley
Patrick Berkeley

Reputation: 2286

You can make a new modal from its constructor, then you have ultimate control and can manipulate the modal object as you please.

// Create a new modal object
var modal = new $.fn.modal.Constructor();

// Set whatever defaults you want
$.fn.modal.defaults = { show: true, backdrop: 'static' };
$('#your_el').modal()
  .show()
  .on('hide', function() {
    callbackFunction();
  });

Upvotes: 4

mozgras
mozgras

Reputation: 3325

This works in ff:

<div id="myModal" class="modal hide">...</div>

Upvotes: 8

Yngve B-Nilsen
Yngve B-Nilsen

Reputation: 9676

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.

Upvotes: 12

Related Questions