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">×</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?