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

I want to add bootstrap Modal to my ASP.net MVC 4 app her's my code :
_CreateDM.cshtml PartialView :

我想在我的ASP.net MVC 4应用程序中添加bootstrap Modal,这是我的代码:_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 After click on add button :

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>

After clicking On add button My screen become dark but nothing appears, so using Developpers tools in chrome I deleted hiden from this line <div id="modalDiv" class="modal hide fade in" aria-hidden="false" style="display: block;"> so I got this : 点击后ASP.net MVC 4引导模式没有出现 So Any one know how to fix those problem, Making Modal appears auto and PopStyle ?

单击“添加”按钮后,我的屏幕变暗但没有显示,因此使用chrome中的Developpers工具我从此行删除了hiden

所以我得到了:所以任何人都知道如何解决这些问题,让Modal显示为auto和PopStyle?

2 个解决方案

#1

I had the same issue: "My screen become dark but nothing appears". The fact is that I was not using the correct structure of the Model tags.

我有同样的问题:“我的屏幕变暗但没有出现”。事实是我没有使用Model标签的正确结构。

The solution is that I always use at least three elements.

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

An element (div) decorated with class="modal"

用class =“modal”装饰的元素(div)

A nested div below decorated with class="modal-dialog"

下面嵌套的div用class =“modal-dialog”装饰

A third nested div below decorated with class="modal-content"

下面的第三个嵌套div用class =“modal-content”装饰

Then, inside this 3rd div, you can add the actual content (body) of your Modal. In my case is a simple DIV, that I will load from a MVC partialView.

然后,在第3个div中,您可以添加模态的实际内容(正文)。在我的例子中是一个简单的DIV,我将从MVC partialView加载。

#2

To slove This Problem All I hade to do changing the tag class and orderlike this :

解决这个问题所有我都想改变标签类并按顺序这样做:

Details.cshtml page :

Details.cshtml页面:

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

CreateDM page :

CreateDM页面:

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

Check out modals struct in Bootstrap official Web Site

在Bootstrap官方网站上查看modals struct

#1