javascript - Twitter Bootstrap Modal Shows Up on Initialization - Stack Overflow

admin管理员组

文章数量:1178544

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?

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?

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow asked Feb 6, 2012 at 5:36 JasonJason 11.6k2424 gold badges8080 silver badges133133 bronze badges 1

• Took me forever to understand this (I'm new to bootstrap). But you don't need to initialize any modal in your script code unless you want to customize a modal. – user12345 Commented Mar 14, 2014 at 19:29

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 13

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

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.

This works in ff:

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

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();
  });

本文标签： javascriptTwitter Bootstrap Modal Shows Up on InitializationStack Overflow