Question

JS

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

HTML

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

部分

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

出于某种原因，只要此页面加载模式弹出即可。我可以解雇它，一切正常。我只是希望它开始隐藏起来。我最近升级到最新的bootstrap，那时我注意到了这个问题。

想法？

Answer 1

对于Bootstrap 2.0

将“show”选项设置为false，如下所示。

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

Yngve B. Nilsen是正确的，默认情况下打开初始化模式。 See bootstrap modal documenation under options

Answer 2

不是这段代码：

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

打开你的模态？我想你只需要在弹出模态时调用模态函数吗？

<强>更新

如果您检查了模态的twitter bootstrap javascript，它会确认在创建时打开模态：

 $.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()
    })
  }

我想你可以稍微调整一下，但切换/隐藏是指如果你已经创建了一个我想象的模态。

在你的代码中，我宁愿选择html-markup方法：

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

这将为您完成所有样板操作，提供启动模态的链接。

Answer 3

这适用于ff：

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

Answer 4

你可以从它的构造函数中创建一个新的模态，然后你有终极控件，可以随意操作模态对象。

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

Twitter Bootstrap模式在初始化时显示

JS

HTML

部分

4 个答案: