Custom animated jQuery popup

Custom animated jQuery popup

This article we are creating custom animated jquery popup. First of all we are using jquery library. We have been using HTML, CSS & JAVASCRIPT. How we have inserted HTML, CSS, JAVASCRIPT into our file. In this popup you can change according to your beautiful design. We can easily to modify. There are a lot of option to make beautiful design. We can use more than more popup. This is a very useful module for all web player. Just copy and paste this simple code & ready your Client logo slider.

This module we can made popup. If we will click to button, The popup will be appear. This is a common model that we use daily, This is very useful plugin.

By using this plugin the design will look like this.

First of all you put Html in your file.

<div class="center-box"> <button id="modelshows">Click Me</button> </div> <div id="shomodel"> <div class="my_inspopups"> <div class="mymainmd"> <div class="close_mds">✖</div> <div class="popup_body"> <h3>We can put your content</h3> <img src="https://images.unsplash.com/photo-1483984812800-387c7b52d147?ixlib=rb-1.2.1&#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80" alt data-lazy-src="https://images.unsplash.com/photo-1483984812800-387c7b52d147?ixlib=rb-1.2.1&amp;is-pending-load=1#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img src="https://images.unsplash.com/photo-1483984812800-387c7b52d147?ixlib=rb-1.2.1&#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80" alt=""></noscript> </div> </div> </div> </div>

Then put Css in your file.

  



And Some css put in your css file.

*{
    margin: 0px;
}
.close_mds {
    position: absolute;
    top: -8px;
    right: -46px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}
div#shomodel {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
    display: none;
}
.my_inspopups{
    display: -webkit-box; 
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100%;
}
.mymainmd {
    width: 100%;
    max-width: 490px;
    margin: 0 auto;
    background: #fff;
    padding: 25px;
    border-radius: 2px;
    text-align: center;
    position: relative;
}
button#modelshows {
    background: #5cdb94;
    border: none;
    width: 100%;
    max-width: 200px;
    padding: 16px;
    font-size: 22px;
    margin: 0 auto;
    font-family: cursive;
    box-shadow: 4px 5px 0px #eaeaea;
}
.center-box {
    height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.overlay-bg {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: red;
}
.popup_body img {
    width: 100%;
}
.popup_body h3 {
    font-family: cursive;
    margin: 0 0 25px 0;
}

  


And Some js link in your page.

https://code.jquery.com/jquery-3.3.1.slim.min.js

And Some js link in your page.

$(document).ready(function(){
    $('#modelshows').click(function(){
       $('#shomodel').fadeIn();
    })

    $(".close_mds").click(function(){
    	$(this).parents('#shomodel').hide();
    });
});


Finally we are completed custom animated jquery popup. First of all I want to tell you this, If you want to use more than logo slider you can do easily first you will have to change the ID of the div in HTML & you also will have to change the ID in the js. Likewise you can use more than more slider in your beautiful page.

This is the black opacity background around the popup but also what we’ll animate with jquery. I also added popup close button so you click close button popup is hide. You can use it everywhere.

We have given the best suitable and easiest way for Custom animated jQuery popup.

Thanks for reading this artificial. we have Html & Html5, jquery, js, css question & answer & Angular6 also. For more designs solutions like this you simply visit our site’s post and pages. collection of amazing designing , development tricks and tips. hope you like Custom animated jQuery popup, for any query and suggestion please comment.

#slider #bootstrapslider #carousel #jquery #Html #custompopup

1 thought on “Custom animated jQuery popup

Leave a Reply

Your email address will not be published. Required fields are marked *