In this article, we going to see jQuery modal popup example with code in simple way step by step with help of example.
If you are looking for this topic then you are at a right place.
Before going start with this please add jQuery in header tag.
From the below code you can understand completely.
Let’s start with the Topic of jQuery modal popup example with code.
In below code i have used jQuery minified as jQuery modal in header tag to achieve the jQuery model popup.
I have also used the CSS jQuery minified in header tag.
Create a link with rel=”modal:open”.
Set the href attribute to the modal’s DOM id.
In HTML section, declare some element of HTML tag with id and class with named modal.
And then add some content within that element tag, for example under paragraph tag.
Then Below which add anchor tag with rel attribute to close this modal popup.
Next and important point to open the modal popup.
To open the modal popup add anchor tag with rel attribute modal:open.
With using this modal rel attribute popup gets opens.
Jquery Read Text File into an Array
Form the below code you can understand completely.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery modal popup example with code</title>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
<div style="background-color:#e5bcbc;" align="center">
<b>Jquery modal popup example with code</b><br/>
Create a link with rel="modal:open" and set the href attribute to the modal's DOM id.
<!-- Modal HTML embedded directly into document -->
<div id="popup" class="modal">
<p>Sample paragraph is simply dummy text of the printing and typesetting industry. Sample paragraph has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and sample paragraph it to make a type specimen book..</p>
<a href="#" rel="modal:close">Close</a>
</div>
<!-- Link to open the modal -->
<p><a href="#popup" rel="modal:open">Open Modal</a></p>
</div>
</body>
</html> Source for jQuery you can get it from link : jQuery Modal
Conclusion:
Finally, we done with the jQuery modal popup example with code, hope you understand from above code.
I hope you like this article and if you feel like we missed out on anything, please comment below.
