引导模式将 html 加载到 CONTENT 而不是 BODY

Question

根据这个来自 bootstrap 3.1.1 的源代码：

 if (this.options.remote) {
      this.$element
        .find('.modal-content')
        .load(this.options.remote, $.proxy(function () {
          this.$element.trigger('loaded.bs.modal')
        }, this))
    }

从服务器加载的 html 片段应该放入模态正文而不是内容。

$('#myModal').modal({ remote: '@Url.Action("Create","Template")' });

加载的 html 放在整个对话框内容而不是正文中！

我可以自己修改源代码来解决这个问题...

if (this.options.remote) {
      this.$element
        .find('.modal-body')
        .load(this.options.remote, $.proxy(function () {
          this.$element.trigger('loaded.bs.modal')
        }, this))
    }

但我不想修改引导源代码！！！

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这是部分 html 片段：

<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

<form action="/Template/Create" method="post">    <p class="editor-label"><label for="Name">Name</label></p>
    <p class="editor-field"><input class="text-box single-line" data-val="true" data-val-length="Name must not be longer than 30 chars." data-val-length-max="30" data-val-length-min="1" data-val-remote="This name already exists." data-val-remote-additionalfields="*.Name" data-val-remote-url="/Template/TemplateExists" data-val-required="Name must not be empty" id="Name" name="Name" type="text" value="" /></p>
    <p class="editor-field"><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></p> 
</form>

Answer 1

我不明白你为什么这么咄咄逼人，但显然这并不愚蠢，因为这就是 boostrap 告诉你要做的。

你有 2 个选择 1. 你已经做了什么：

if (this.options.remote) {
  this.$element
    .find('.modal-body')
    .load(this.options.remote, $.proxy(function () {
      this.$element.trigger('loaded.bs.modal')
    }, this))
}

第二个，而不是插入这个：

<form action="/Template/Create" method="post">    
    <p class="editor-label"><label for="Name">Name</label></p>
    <p class="editor-field"><input class="text-box single-line" data-val="true" data-val-length="Name must not be longer than 30 chars." data-val-length-max="30" data-val-length-min="1" data-val-remote="This name already exists." data-val-remote-additionalfields="*.Name" data-val-remote-url="/Template/TemplateExists" data-val-required="Name must not be empty" id="Name" name="Name" type="text" value="" /></p>
    <p class="editor-field"><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></p>
</form>

你可以插入这个（这就是 bs 脚本所期待的）

<div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel"></h4>
        </div>
        <div class="modal-body">
            <form><!--your form here!--></form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>

希望对你有帮助！

Answer 2

刚才遇到了同样的问题。我忘了包含一些引导 js 文件。如果有人遇到同样的问题，这里有一些脚本可以帮我解决这个问题：

<script type="text/javascript" src="bootstrap-modal/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="bootstrap-modal/js/bootstrap-modalmanager.js"></script>