How to Create a jQuery Text Click Image Display?

Estimated read time 2 min read

Here’s an example of how to create a jQuery Text Click Image Display:

HTML code:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Text Click Image Display Example</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
		#image-display {
			display:none;
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:rgba(0,0,0,0.5);
			text-align:center;
			z-index:999;
		}
		
		#image-display img {
			max-width:80%;
			max-height:80%;
			margin-top:10%;
		}
	</style>
</head>
<body>
	<p>Click the text below to display an image:</p>
	<p id="text-click">Click Me!</p>
	
	<div id="image-display">
		<img id="image" src="">
	</div>
	
	<script>
		$(document).ready(function(){
			$("#text-click").click(function(){
				$("#image-display").fadeIn();
				$("#image").attr("src", "example.jpg");
			});
			
			$("#image-display").click(function(){
				$("#image-display").fadeOut();
			});
		});
	</script>
</body>
</html>

In this example, we have a paragraph with the ID “text-click” which, when clicked, will display an image. We also have a div with the ID “image-display” which will display the image as a modal popup.

We also have a script tag where we add our jQuery code. In the script, we listen for a click event on the “text-click” paragraph. When the paragraph is clicked, we call the fadeIn() method on the “image-display” div, which will display it as a modal popup.

In addition, we set the src attribute of the “image” img element to the path of the image we want to display. In this example, we are using an image called “example.jpg”, but you can replace this with the path of your own image.

Finally, we add another click event listener on the “image-display” div. When this div is clicked, we call the fadeOut() method on the modal popup, which will close it.

Note that in the CSS, we position the “image-display” div to cover the entire screen and set its z-index to a high value to ensure that it is displayed on top of other content.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply