I open a modal form in ASP.NET MVC and it appears as inactive

Question

I open a modal form in ASP.NET MVC and it appears as inactive

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

Good evening I have a little doubt, I'm opening a modal form and when I press the button that opens it, it comes out as if the modal form was inactive (I attached the image) and if I click on any part, it closes, maybe I'm forgetting a library? 'I leave the code with which I open the modal

<div>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
     <i class="fa fa-plus"></i>Agregar una cuenta
   </button>
                                </div>

'

bootstrap asp.net mvc

asked by Javier Cordova 22.03.2017 в 02:34

source

3 answers

SELECT does not work on a database with PHP Auto height resize window jquery

score 2 · Answer 1

I answer to myself if someone else needs it: increase the following in the main div of the modal

data-backdrop="false" style="background-color: rgba (0, 0, 0, 0.5); staying like this:

<div id="formModal" class="modal fade" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" aria-hidden="true">

The problem was that there was a conflict with the primary containers, with these properties the background is avoided, you could also move the modal div out of the main container and you're done!

score 1 · Answer 2

This happens because at some point the .backdrop changes its property z-idex or the .modal .

To fix it, add a css rule to .modal

.modal {
  /*Cambiando el z-indez del modal*/
  z-index: 1001 !important;
}

or a rule css at .backdrop

.backdrop{
  /*Cambiando el z-indez del backdrop*/
  z-index: 1001 !important;
}

Note: The number can be much higher in the case of .modal or less in case of .backdrop

score 0 · Answer 3

I used the code you left to open a modal and if it worked. I leave the code you use.

<div>
<div id="formModal" class="modal fade"  role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin: 18% auto; width: 360px">
        <div class="modal-content cont">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Cuadro de diálogo</h4>
            </div>
            <div class="modal-body">
                <p>Modal de prueba</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">X</button>
            </div>
        </div>
    </div>
</div>

<div class="text-center">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
        <i class="fa fa-plus"></i>Agregar una cuenta
    </button>
</div>