Thursday, June 16, 2022

Website Default.aspx popup image C# ASP.NET with Jquery

 <%--Add Popup New JS on 30092021--%>

    <script type="text/javascript" src="slider.js"></script>

    <script type='text/javascript'>

        $(function () {

            var overlay = $('<div id="overlay"></div>');

            overlay.show();

            overlay.appendTo(document.body);

            $('.popup').show();

            $('.close').click(function () {

 

                $('.popup').hide();

                overlay.appendTo(document.body).remove();

                return false;

            });


            $('.x').click(function () {

                $('.popup').hide();

                overlay.appendTo(document.body).remove();

                return false;

            });

        });

    </script>


    <%--Add Popup New CSS on 30092021--%>

    <style type="text/css">

        #overlay

        {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: #000;

            filter: alpha(opacity=70);

            -moz-opacity: 0.7;

            -khtml-opacity: 0.7;

            opacity: 0.7;

            z-index: 100;

            display: none;

        }

        .img a

        {

            text-decoration: none;

        }

        .popup

        {

            width: 100%;

            margin: 0 auto;

            display: none;

            position: fixed;

            z-index: 101;

        }

        .img

        {

            min-width: 90%;

            width: 564px;

            min-height: 150px;

            height:auto;

            margin: 80px auto;

            background: #f3f3f3;

            position: relative;

            z-index: 103;

            padding: 1px;

            border-radius: 5px;

            box-shadow: 0 2px 5px #000;

           

        }

        .img p

        {

            clear: both;

            color: #555555;

            text-align: justify;

        }

        .img p a

        {

            color: #d91900;

            font-weight: bold;

        }

        .img .x

        {

            float: right;

            height: 35px;

            left: 22px;

            position: relative;

            top: -25px;

            width: 34px;

        }

        .img .x:hover

        {

            cursor: pointer;

        }

    </style>


 <div class='popup'>

        <div class="img">

            <img src="cross.png" alt='quit' class='x'

                id='x' />   

            <img src="akam.jpg" style="height:100%; width:100%" />

          

        </div>

    </div>





No comments:

Post a Comment