CODEWITHSUNDEEP
asp.net-mvcbootstrap-modal
Paul Z.
Paul Z.

Reputation: 105

Bootstrap Modal with model ASP.NET MVC 4

I have a webapp in .Net MVC 4 and Bootstrap. I need to show a Modal with some data from model. My page is typed with the model. The problem is this: If I put the modal div in my page (this page uses a layout), the div opens as modal dialog, but looks darkened and can not be clicked. If I put the modal div in the main layout, the modal looks ok, but I can not use the model inside the modal div, because my layout is not model-typed. One option would be to model-type my layout, and the other option maybe keep my div in my page but use some property that puts my modal div in front of all (like z-index). I tried this last one but with no success.

The code in my page.

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog" style="z-index: 150;">
    <div class="modal-dialog" style="z-index: 151;">
        <div class="modal-content" style="z-index: 152;">
            <div class="modal-header" style="z-index: 153;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body" style="z-index: 153;">
                <label>Hello @Model.UserName</label>
            </div>
            <div class="modal-footer" style="z-index: 153;">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Views: 2065

Answers (3)

Alexander
Alexander

Reputation: 4537

Just remove style attribute from the <div> that id is myModal (at least only first issue). 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


<div id="myModal" class="modal fade" role="dialog" style="z-index: 150;">
    <div class="modal-dialog" style="z-index: 151;">
        <div class="modal-content" style="z-index: 152;">
            <div class="modal-header" style="z-index: 153;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body" style="z-index: 153;">
                <label>Hello @Model.UserName</label>
            </div>
            <div class="modal-footer" style="z-index: 153;">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <label>Hello @Model.UserName</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal without Style attribute</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal with Style attribute</button>

Upvotes: 1

Paul Z.
Paul Z.

Reputation: 105

I kept my div in my page (not moved to layout) by using attribute data-backdrop="false" in my div modal. With this, the modal looks ok.

And I removed all z-index attributes from all divs.

Upvotes: 0

Villa_pr
Villa_pr

Reputation: 55

Try using the one on the examples in the bootstrap page. I use them a lot without problems. 

`<div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>`

Upvotes: 1

Related Questions