+2 votes
by
Good afternoon.
Landing page for bootstrap. Made modal window using bootstrap.js
In the window opens a form "Request a call back". Cause it needs two links: in the header and footer.
At the window spelled out the absolute positioning. When you click on the top link, a modal window appears and all is well, but when you click on the bottom of the page fades out and the modal window, apparently, appears at the top.
<div class='contactUs'>8 (800) 000 00 00 <a href="#modal" role='button' onclick='callModal' data-toggle="modal" class='callBack'>Перезвоните мне</a></div> 
<div id="modal" class="modal popUp fade" style='display: none;'>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-header">
<h2>Заказать обратный звонок</h2>
<div class="modal-body">
<form>
<input type="text" placeholder='Ваше имя'>
<input type="tel" placeholder='Ваш телефон*' required>
<button type='submit' class='btn btn-success btn-call'>Заказать звонок</button>
</form>
</div>
</div>
</div>
.popUp {
width: 385px;
height: 274px;
font-family: 'OpenSans', sans-serif;
background-color: #fff;
position: absolute;
top: 57px;
left: 35%;
border-radius: 5px;
padding-left: 15px;
}
$('#modal').click(function('callModal'){
$('#modal').modal();
});

1 Answer

0 votes
by
 
Best answer
Try .popUp{position: fixed;}
...