ASP.net MVC 4 bootstrap modal's not appearing after click

Question

I want to add bootstrap Modal to my ASP.net MVC 4 app her's my code :
_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 :

 <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 : So Any one know how to fix those problem, Making Modal appears auto and PopStyle ?

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

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

1. An element (div) decorated with class="modal"
2. A nested div below decorated with class="modal-dialog"
3. A third nested div below decorated with 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.

Answer 2

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

Details.cshtml page :

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

CreateDM page :

<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