How To Make a Modal Box With CSS and JavaScript

open modal popup using jquery on button click
open modal popup using jquery on button click
open modal popup using jquery on button click

Hello friends today in this article we will learn how to create custome modal popup using javascript and css.


Here i will tell you how to create javascript modal on click step by step.

Step-1 First of all just add this javascript file and java script code in your webpage bottom of body section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(".share").click(function () {
         $(".mysocialbox").show();
    });

    $(".closemydiv").click(function () 
	{
        $(".mysocialbox").hide();
    });
</script>

Step-2 Now add this html code on your webpage

<div style="display:none;" class="mysocialbox">
  <div class="closemydiv"><i class="fa fa-times"></i></div>
    <div class="social1">
       <a href="#" id="share-fb" class="sharer button"><i class="fa fa-3x fa-facebook-square"></i></a>
       <a href="#" id="share-tw" class="sharer button"><i class="fa fa-3x fa-twitter-square"></i></a>
       <a href="#" id="share-li" class="sharer button"><i class="fa fa-3x fa-linkedin-square"></i></a>
       <a href="#" id="share-gp" class="sharer button"><i class="fa fa-3x fa-google-plus-square"></i></a>
       <a href="#" id="share-em" class="sharer button"><i class="fa fa-3x fa-envelope-square"></i></a>
    </div>
</div>	

Step-3 Now add this .share class on that div or html element on which click you want to open javascript modal popup.

<div class="share"><h1>Open Popup</h1></div>

Step-4 Now add this css code in your css file

<script>
    .mysocialbox {
    width:400px;
    height: 180px;
    left: 50%;
    top: 50%;
    text-align:center;
    position: fixed;
    background: #fff;
    transform: translate(-50%,-50%);
    -webkit-box-shadow: 0px 0px 136px 76px rgba(115,115,115,1);
    -moz-box-shadow: 0px 0px 136px 76px rgba(115,115,115,1);
    box-shadow: 0px 0px 136px 76px rgba(115,115,115,1);
}


.closemydiv
{
    position:absolute;
    right:-10px;
    top:-10px;
    width:40px;
    cursor:pointer;
    height:40px;
    font-size:20px;
    border-radius:100%;
    background:#000;
    color:var(--theme-color);
}

.closemydiv i
{
    position:absolute;
    top:50%;
    left:50%;
	color:#fff;
    transform:translate(-50%,-50%);

}
	
.share
{
	cursor: pointer;
}

.mysocialbox .social1 i 
{
    color: var(--theme-color);
    margin-top:50px;
}
</script>

Leave a Reply

avatar
  Subscribe  
Notify of