I work with ASP.NET MVC 5 I cannot show a popup modal form when I call it from a floating button it is shown and automatically closes the popup modal view is only seen for seconds. 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 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">×</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?
I think you should add the
$("#myModal").modal('show');
insidesuccess
of the callajax
.Being an asynchronous call, the modal doesn't open right after having the html embedded. It should open right after receiving the
response
. The end result would be like this:I'm sure it's a problem with the order in which you added the .css and .js, and maybe you didn't even add any from bootstrap. For the other, it provides a Jsfiddle, or at least indicates if there is an error in the console or not.
Look at this Jsfiddle I made for you:
https://jsfiddle.net/pmiranda/29nvq5rf/