<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <style type="text/css"> .modal-content .close{ position: absolute; right: 0px; top: 0px; background: #0e76a8; color: white; padding: 2px 6px; cursor: pointer;} #modal-btn{ border: none; padding: 10px 20px; font-size: 18px; background: #31a0d5; color: white; margin: 20px; cursor: pointer;} #modal-btn:focus{ outline: none; cursor: pointer;} .modal-box{ position: absolute; left: 37%; top: 10%; width: 400px; height: 250px; background-color: #31a0d5; box-shadow: 0px 0px 15px #00000026; display: none;} .modal-content h3{ text-align: center; color: white; font-size: 25px;} .modal-content ul{ position: relative; left: 80px; font-size: 20px; color:white; } </style> </head> <body> <!--====HTML modal start===--> <button id="modal-btn">Open Model</button> <div class="modal-box" id="modalBox"> <div class="modal-content"> <div class="close">X</div> <h3>This is Model</h3> <ul style="list-style-type: none"> <li>Easy to Learn</li> <li>Attractive Modal</li> <li>Free Source Code</li> </ul> </div> </div> <!--====HTML modal end===--> <!--jquery CDN--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- custom jquery link--> <script type="text/javascript" src="custom.js"></script> </body> </html>