I can not show a modal form popup

4

Working with ASP.NET MVC 5 I can not show a modal form popup when I call it from a floating button shown and it automatically closes only the modal view popup looks second. I show code.

HTML

<div class="contenedor">
            <button class="botonF1">
                <span>+</span>
            </button>
            <button class="btn botonF2">
                <span>+</span>
            </button>
            <button class="btn botonF3">
                <span>+</span>
            </button>
            <button class="btn botonF4">
                <span>+</span>
            </button>
            <button class="btn botonF5" onclick="llamarVistaParcial();" data-toggle="modal" data-target="#myModal">
                <span>+</span>
            </button>
        </div>

MODAL from the Index

div id="myModal" class="modal fade in">
    <div class="modal-content" >
        <div class="modal-header" style="background-color: #337ab7;border-color:#2e6da4;color:#fff;">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h5 class="modal-title" >Proveedor</h5>
        </div>
        <div class="modal-body">
            <div id="resultado"></div>
        </div>
    </div>

CSS

*{


 margin:0;

    }
header{
  height:170px;
  color:#FFF;
  font-size:20px;
  font-family:Sans-serif;
  background:#009688;
  padding-top:30px;
  padding-left:50px;
}
.contenedor{
  width:90px;
  height:240px;
  position:absolute;
  right:0px;
  bottom:0px;
}
.botonF1{
  width:60px;
  height:60px;
  border-radius:100%;
  background:#F44336;
  right:0;
  bottom:0;
  position:absolute;
  margin-right:16px;
  margin-bottom:16px;
  border:none;
  outline:none;
  color:#FFF;
  font-size:36px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition:.3s;  
}
span{
  transition:.5s;  
}
.botonF1:hover span{
  transform:rotate(360deg);
}
.botonF1:active{
  transform:scale(1.1);
}
.btn{
  width:40px;
  height:40px;
  border-radius:100%;
  border:none;
  color:#FFF;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  font-size:28px;
  outline:none;
  position:absolute;
  right:0;
  bottom:0;
  margin-right:26px;
  transform:scale(0);

    }
.botonF2{
  background:#2196F3;
  margin-bottom:85px;
  transition:0.5s;
}
.botonF3{
  background:#673AB7;
  margin-bottom:130px;
  transition:0.7s;
}
.botonF4{
  background:#009688;
  margin-bottom:175px;
  transition:0.9s;
}
.botonF5{
  background:#FF5722;
  margin-bottom:220px;
  transition:0.99s;
}
.animacionVer{
  transform:scale(1);
}

JS

$(document).ready(function () {
$('.botonF1').hover(function () {
    $('.btn').addClass('animacionVer');
})
$('.contenedor').mouseleave(function () {
    $('.btn').removeClass('animacionVer');
})
});

JS POPUP

<script>
            function llamarVistaParcial() {
                var laURLDeLaVista = '@Url.Action("CreatePV", "Proveedor")';
                $.ajax({
                    cache: false,
                    async: true,
                    type: "GET",
                    url: laURLDeLaVista,
                    data: {},
                    success: function (response) {
                        //$('#resultado').html('');
                        $('#resultado').html(response);
                    }
                });
                $("#myModal").modal('show');
            };
        </script>

What am I doing wrong?

    
asked by Pedro Ávila 21.02.2017 в 19:09
source

2 answers

3

I think you should add the $("#myModal").modal('show'); within success of the call ajax .

Being an asynchronous call, the modal does not open just after having the embedded html. It would have to open just after receiving the response . The final result would be like this:

$.ajax({
   cache: false,
   async: true,
   type: "GET",
   url: laURLDeLaVista,
   data: {},
   success: function (response) {
       $('#resultado').html(response);
       $("#myModal").modal('show');
   }
});
    
answered by 21.02.2017 / 19:38
source
-3

I'm sure it's a problem in the order in which you've added the .css and .js, and you may not even have added any bootstrap. For the other brings a Jsfiddle, or at least indicates whether there is error in the console or not.

Look at this Jsfiddle that I made to you:

link

    
answered by 21.02.2017 в 19:56