Reputation: 2563
I am trying to work with modal here.
Below is the code of my modal.
<div class="modal-wrapper modal-popup-signup">
<div class="modal-close modal-popup-signup-close"></div>
<div class="modal-body">
<h1>SIGN UP</h1>
<form action="" class="password-change">
<h2>E-MAIL ID*</h2>
<input type="text" class="text">
<h2>PASSWORD*</h2>
<input type="password" class="text">
<h2>TITLE*</h2>
<h2>FIRST NAME </h2>
<input type="text" class="text">
<h2>LAST NAME </h2>
<input type="text" class="text">
<input type="submit" class="submit">
</form>
</div>
</div>
On this li
I have a anchor tag where i am opening the Modal.
<ul>
<li></li>
<li></li>
<li><a href="#"class="modal-popup-signup-open">Signup</a></li>
</ul>
Here's the JS for it.
$(document).ready(function(){
$('.modal-popup-signup-open').click(function(){
$('.modal-popup-signup').css("display", "block");
});
$('.modal-popup-signup-close').click(function(){
$('.modal-popup-signup').css("display", "none");
});
});
The fiddle, It for some reason worked here but not working for me locally.
EDIT ! : I am doing this only for small screen. So when I go to full window size I can see the pop-up. But why not for small screen? Provided I am using proper bootstrap modal.
Upvotes: 1
Views: 84
Reputation: 4972
To open pop-up:
$('.modal-popup-signup-open').click(function(){
$('.modal-popup-signup').modal('show');
});
To close:
$('.modal-popup-signup-close').click(function(){
$('.modal-popup-signup').modal('hide');
});
Upvotes: 1
Reputation: 1088
Instead of
$('.modal-popup-signup').css("display", "block");
Use following
$('.modal-popup-signup').modal('show');
for closing of modal use
$('.modal-popup-signup').modal('close');
and also use the href="javascript:void(0)"
in anchor tag
Upvotes: 1