How to add Jquery or javascript functions for click to popup open? [closed] - popup

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
popup images I need to click to menu items popup show

Answer 1

You can hide popup content initially using CSS & then use jQuery fadeIn()/ fadeOut() to show/hide popup respectively.
Sample HTML:
click to open popup
<div class="popup-content"> <!-- use display:none to hide initially -->
x
<h1>Lorem Ipsum</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
jQuery click function:
jQuery(document).ready(function($){
$('.click-to-open').on('click', function(e){
e.preventDefault();
$('.popup-content').fadeIn();
});
$('.popup-close').on('click', function(e){
e.preventDefault();
$('.popup-content').fadeOut();
}
});
Check the following fiddle for working example: https://jsfiddle.net/tvaunsg3/1/
You can use toggleClass() on body to create some overlay while pop-up is active.
Alternatively, you can also use jQuery Modal or Magnific Popup if you need more advanced functionality (callback and etc).