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 fragement应该放入模态体非内容。

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

加载的html放在整个对话框内容NOT body！

中

我可以自行修改源代码......

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

但我不想修改bootstraps源代码!!!

enter image description here

<!-- 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告诉你的事情。

你有两个选择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

刚才有同样的问题。我忘了包含一些bootstrap 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>

bootstrap模态将html加载到CONTENT not BODY中

2 个答案: