Twitter Bootstrap Modale s'Affiche lors de l'Initialisation

JS

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

HTML

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

Partielle

@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>
}

Pour une raison quelconque, dès que cette page se charge modale s'affiche. Je peut la faire disparaître et tout fonctionne bien. Je voudrais juste attendre pour commencer caché. J'ai récemment mis à niveau vers la dernière bootstrap et c'est quand j'ai remarqué ce problème.

Idées?

M'a pris une éternité pour le comprendre (je suis nouveau sur bootstrap). Mais vous n'avez pas besoin d'initialiser toute modal dans le code de votre script, sauf si vous voulez personnaliser un modal.

OriginalL'auteur Jason | 2012-02-06

  1. 12

    N'est pas ce code:

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

    l'ouverture de votre modal?
    J'ai pensé que vous avez seulement besoin d'appeler le modal-fonction lorsque vous souhaitez que le modal popup?

    Mise à JOUR

    Si vous inspectez le twitter bootstrap javascript pour la modale, il confirme que, lors de la création, il ouvre le 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()
    })
  }

    Je suppose que vous pouvez le tordre un peu, mais la bascule/masquer est si vous avez déjà un modal créé je présume.

    Dans votre code, je préfère juste aller avec le html-balisage:

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

    Qui vont faire tout le passe-partout pour vous, grâce à un lien qui lance le modal.

    Veuillez voir mon edit

    OriginalL'auteur Yngve B-Nilsen

  2. 13

    Pour Bootstrap 2.0

    Définir le "show" option à false comme ça.

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

    Yngve B. Nilsen est vrai que la fin de l'initialisation modale s'ouvre par défaut.
    Voir modal bootstrap documenation sous options

    Il fonctionne très bien
    C'est la meilleure réponse en termes d'obtenir la boîte de dialogue de ne pas afficher sur init.

    OriginalL'auteur Keith Beller

  3. 8

    Cela fonctionne dans ff:

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

    OriginalL'auteur mozgras

  4. 4

    Vous pouvez faire une nouvelle modal de son constructeur, alors vous avez ultime de contrôle et de pouvoir manipuler l'objet modal comme vous s'il vous plaît.

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

    OriginalL'auteur Patrick Berkeley