J QUERY POPUP IN ASP.NET

J QUERY POPUP IN ASP.NET


First download  jquery-1.4.3.min.js file and add in to Scripts folder then take reference to this script from head tag

IN ASPX:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Sample popups </title>
 //This is Style sheet for popup window
 <style type="text/css">
        .web_dialog_overlay
        {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #000000;
            opacity: .15;
            filter: alpha(opacity=15);
            -moz-opacity: .15;
            z-index: 101;
            display: none;
        }
        .web_dialog
        {
            display: none;
            position: fixed;
            width: 380px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-left: -190px;
            margin-top: -100px;
            background-color: #ffffff;
            border: 2px solid #336699;
            padding: 0px;
            z-index: 102;
            font-family: Verdana;
            font-size: 10pt;
        }
        .web_dialog_title
        {
            border-bottom: solid 2px #336699;
            background-color: #336699;
            padding: 4px;
            color: White;
            font-weight:bold;
        }
        .web_dialog_title a
        {
            color: White;
            text-decoration: none;
        }
        .align_right
        {
            text-align: right;
        }
    </style>
//Add reference above downloaded scrpt
 <script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript">

        $(document).ready(function ()
        {
            $("#btnShowSimple").click(function (e)
            {
                ShowDialog(false);
                e.preventDefault();
            });

            $("#btnShowModal").click(function (e)
            {
                ShowDialog(true);
                e.preventDefault();
            });

            $("#btnClose").click(function (e)
            {
                HideDialog();
                e.preventDefault();
            });

            $("#btnSubmit").click(function (e)
            {
                var brand = $("#brands input:radio:checked").val();
                $("#output").html("<b>Your favorite subject: </b>" + brand);
                HideDialog();
                e.preventDefault();
            });
        });

        function ShowDialog(modal)
        {
            $("#overlay").show();
            $("#dialog").fadeIn(300);

            if (modal)
            {
                $("#overlay").unbind("click");
            }
            else
            {
                $("#overlay").click(function (e)
                {
                    HideDialog();
                });
            }
        }

        function HideDialog()
        {
            $("#overlay").hide();
            $("#dialog").fadeOut(300);
        }
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h3>JQuery Popup Dialogs</h3>
   
    <input type="button" id="btnShowSimple" value="Simple Dialog" />
    <input type="button" id="btnShowModal" value="Modal Dialog" />
   
    <br /><br />      
   
    <div id="output"></div>
   
    <div id="overlay" class="web_dialog_overlay"></div>
   
    <div id="dialog" class="web_dialog">
        <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
            <tr>
                <td class="web_dialog_title">Choose Subject</td>
                <td class="web_dialog_title align_right">
                    <a href="#" id="btnClose">Close</a>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2" style="padding-left: 15px;">
                    <b>Choose your favorite subject? </b>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2" style="padding-left: 15px;">
                    <div id="brands">
                        <input id="brand1" name="brand" type="radio" checked="checked" value="Maths" /> Maths
                        <input id="brand2" name="brand" type="radio" value="Socal" /> Social
                        <input id="brand3" name="brand" type="radio" value="Science" /> Science
                    </div>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center;">
                    <input id="btnSubmit" type="button" value="Submit" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

ouput:


when run this page:

when click on Simple Dialog:
when click on outside of the popup window automatically popup is close.
when click on Model Dialog button: open same popup window but it is not close when click on outside
of the popup. we should click on submit or click on close. when click on submit button.


Comments

Post a Comment

Popular posts from this blog

Setup and implement simple angular.js program in MVC

Image
Here I'm writing simple steps for how to  setup angular.js in ASP.NET MVC application and implement small program using angular.js. 1. Create a MVC web application using VisualStudio. 2. Add following Angular js references to _layout page(Master page) as per showing below   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-touch.js"></script>     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-resource.js"></script>    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-animate.js"></script>     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-route.js"></script>    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-mocks.js"></...
Read more

Cross browsers detect print events using javascript

Image
Here I'm explain about detecting before print, after print in cross browsers using Java script. Window beforeprint,afterprint events working in only IE,Firefox browsers, but we can detect these events using  matchMedia with event handler, here I'm explain with small example. Javascript Code: (function () {         var beforePrint = function () {             alert('Functionality to run before printing.');         };         var afterPrint = function () {             alert('Functionality to run after printing');         };         if (window.matchMedia) {             var mediaQueryList = window.matchMedia('print');             mediaQueryList.addListener(function (mql) {                 if (mql.matches) {...
Read more

HTML5 drag and drop

Image
Live Demo : 1 2 3 4 Source code : css : <style>     .dropdiv {         width: 50px;         height: 50px;         padding: 10px;         border: 1px solid #aaaaaa;     }     .spn {     font-size:50px     }    </style> JAVASCRIPT : <script>     function allowDrop(ev) {         ev.preventDefault();     }     function drag(ev) {         ev.dataTransfer.setData("text", ev.target.id);     }     function drop(ev) {         ev.preventDefault();         var data = ev.dataTransfer.getData("text");     ...
Read more