i have created a popup for my website, but i want to hide it for mobile devices. i have done as below to hide it
.modal-content{
width: 440px;
margin-left: 40px;
margin-top: -15px;
}
.modal-header{
height: 5px;
}
.peep{
margin-top: -6px;
}
@media screen and (max-width: 600px) {
.money{
display: none;
}
}
its not shown when i do this, but the problem is a light dark shade is shown like the image below and the screen is not moving,not scrolling.
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
<div class="money">
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="peep"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
</div>
<div class="modal-body">
<img style="margin-left:-7.5px; margin-top:-10px;" src="assets\images\popup.jpg" alt="offer">
</div>
</div>
</div>
</div>
</div>
this is the full code of the popup. can anyone tell me whats wrong with it?