Modal Popup Animated Effect

by Akram kamal

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/2.0.1/themes/smoothness/jquery-ui.css">
<div class="image2">
                    <a class="image" href="#" ><span class="roll" style="opacity: 0;"></span>
                        <img src="https://www.missionliquor.com/images/products/2373_1dbd587fcfbd6df1849db9f4cdc4c79c.jpg" alt="Absolut Mandrin 750 ML" title="Absolut Mandrin 750 ML" height="188px" width="230px">
                    </a>
                </div>
    
    <div id='dialog'>
                    <div class="quick-view1 preview">
                        <div class="wrapper marg row-fluid">
                            <div class="left span4">
                                <div class="image3">
                                    <a>
                                        <img src="https://www.missionliquor.com/images/products/2373_1dbd587fcfbd6df1849db9f4cdc4c79c.jpg" alt="Absolut Mandrin 750 ML" title="Absolut Mandrin 750 ML" height="205px" width="244px">
                                    </a>
                                </div>
                            </div>

                            <div class="right span8">
                                <h2>Absolut Mandrin 750 ML</h2>
                                <div class="inf">
                                    <span class="prod-stock">Available in Stock: </span>
                                    <div class="price">
                                        INR Rs 2300.00
                                    </div>
                                </div>

                                <div class="cart-button">
                                    <div class="cart">
                                        <a class="button addToCart" title="Shop Now"><span>Shop Now</span></a>
                                    </div>
                        ...

CSS

.image2 {
background-color: rgb(246, 215, 215);
padding: 11px;
margin-bottom: 20px;
width:270px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

#dialog
{
    display:none;
}


span.roll {
background: url("https://www.iconfinder.com/icons/298865/search_icon#size=128") center center no-repeat rgb(49, 18, 101);
height: 188px;
position: absolute;
width: 230px;
z-index: 10000;
-webkit-box-shadow: 0px 0px 4px rgb(49, 18, 101);
-moz-box-shadow: 0px 0px 4px rgb(49, 18, 101);
box-shadow: 0px 0px 4px rgb(49, 18, 101);
box-sizing: border-box;
}

.preview {
padding: 15px;
}

.preview .marg {
margin-bottom: 25px;
}

.preview .description {
height: 160px;
padding: 15px;
overflow: auto;
border: 1px solid rgb(207, 207, 207);
}

JavaScript

function ShowBriefInfo(e)
{
    e.preventDefault();
    $("#dialog").dialog("open");
        
}


$(function () {
    
    $("#dialog").dialog({
        autoOpen:false,
        show:{
            effect:"blind",
            duration: 1600
        },
        hide:{
            effect:"explode",
            duration:980
        }
        });
    
    $("a").click(function(e){
        e.preventDefault() ;
        $("#dialog").dialog("open");
    });
    
    // OPACITY OF BUTTON SET TO 0%
    $(".roll").css("opacity", "0");

    // ON MOUSE OVER
    $(".roll").hover(function () {

        // SET OPACITY TO 70%
        $(this).stop().animate({
            opacity: .7
        }, "slow");
    },

    // ON MOUSE OUT
    function () {

        // SET OPACITY BACK TO 50%
        $(this).stop().animate({
            opacity: 0
        }, "slow");
    });
});