ASP.net MVC 4 引导模式在点击后没有出现答案

【问题标题】：ASP.net MVC 4 bootstrap modal's not appearing after clickASP.net MVC 4 引导模式在点击后没有出现
【发布时间】：2014-08-13 06:48:56
【问题描述】：

我想将引导模式添加到我的 ASP.net MVC 4 应用程序中，这是我的代码：
_CreateDM.cshtml PartialView：

    @model pfebs0.Models.DEMANDE

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="CreateDM">Add</h3>
</div>
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    @Html.HiddenFor(model => model.CIT_CIN)
    <div class="modal-body">
        <div class="control-group">
            <label for="Description">Title : </label>
            @Html.TextAreaFor(model => model.DESCREPTION)
            @Html.ValidationMessageFor(model => model.DESCREPTION)
         </div>
        ... some div class like the last one 
      </div>
      <div class="modal-footer">... </div>
}

details.cshtml：

@model pfebs0.Models.CITOYEN
@using GridMvc.Html
@{
    ViewBag.Title = "Details";
}

@section head {    
    <script type="text/javascript">
        $(function () {

            $.ajaxSetup({ cache: false });

            $('#btnAdd').click(function () {
                $('#modalContent').load(this.href, function () {
                    $('#modalDiv').modal({
                        backdrop: 'static',
                        keyboard: true
                    }, 'show');
                    bindForm(this);
                });
                return false;
            });
        });

</script>
    }

<h2>Details</h2>


   @Html.ActionLink("Ajouter", "CreateDM", "Citoyen",
                new { id = @Model.CIT_CIN },
                new { id = "btnAdd", @class = "btn btn-success modal-link" })



<div id="modalDiv" class="modal hide fade in" >
    <div id="modalContent"></div>
</div>

Details.chtml点击添加按钮后：

 <a class="btn btn-success modal-link" href="/Citoyen/CreateDM/13403694" id="btnAdd">ADD</a>


 <div id="modalDiv" class="modal hide fade in" aria-hidden="false" style="display: block;">
 <div id="modalContent"><div class="modal-header"> <button type="button" class="close" data-dismiss="modal"aria-hidden="true">×</button>
     <h3 id="CreateDM">Add</h3> </div> <form action="/Citoyen/CreateDM/13403694?_=1399114303954" method="post"> 
 <div class="modal-body">
         // some DiV have been deleted
       <div class="modal-footer">
             <button type="submit" class="btn btn-default">Submit</button>&nbsp; &nbsp;
            <button type="reset" class="btn btn-default">Cancel</button>&nbsp; &nbsp;
        </div> </form> </div> </div>

在点击添加按钮My screen become dark but nothing appears 后，因此在 chrome 中使用 Developpers 工具 I deleted hiden 从这一行 <div id="modalDiv" class="modal hide fade in" aria-hidden="false" style="display: block;"> 所以我得到了这个：所以任何人都知道如何解决这些问题，Making Modal 出现 auto 和 PopStyle ?

【问题讨论】：

您的浏览器控制台中似乎有错误。
我的控制台中的错误是由这个引起的：bindForm(this); in javascript 即使我删除了同样的问题并且第二个错误在jquery.validate.min.js.map file

标签： jquery html css asp.net-mvc twitter-bootstrap

【解决方案1】：

我遇到了同样的问题：“我的屏幕变黑了，但什么也没有出现”。事实是我没有使用正确的模型标签结构。

解决方案是我总是使用至少三个元素。

用 class="modal" 装饰的元素 (div)
下面的嵌套 div 装饰有 class="modal-dialog"
下面的第三个嵌套 div 装饰有 class="modal-content"

然后，在第三个 div 中，您可以添加 Modal 的实际内容（正文）。在我的例子中是一个简单的 DIV，我将从 MVC partialView 加载。

【讨论】：

【解决方案2】：

为了解决这个问题我所要做的就是改变标签类和这样的顺序：

Details.cshtml 页面：

<div id="modalDiv" class="modal fade" >
            <div class="modal-dialog">
                </div>
        </div>

创建DM页面：

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="CreateDM">Ajouter un demande</h3>
</div>
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
..
    <div class="modal-body">
        ..
      </div>
       <div class="modal-footer">
          ..
       </div>
}

</div>

查看Bootstrap official Web Site中的模态结构

【讨论】：