Translate

Wednesday, 26 January 2022

Jquery modal popup on page load

 

<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

</div>
<script>
$( document ).ready(function() {
    let todaysDate = new Date();
    // let dateOfClosing = new Date('02 03 2022'); // 03 Feb 2022  
    let dateOfClosing = new Date('01 25 2022'); // new Date('mm dd yyyy')
   
     alert('Date Of Closing:'+dateOfClosing);
     alert('Todays Date:'+todaysDate);

        if(todaysDate<=dateOfClosing)
        {
        $('#myModal').modal('show');
        }
});
</script>
</body>
</html>

No comments:

Post a Comment