Step towards Dot Net: Jquery popup window in ASP.Net.

For every Application popup window plays very important role, because it makes more user friendly to the Application. Generally popup window is used for following reasons-

-To alert user
-To show information
-To take input

For other cases also you can use popup window.

In this article I am going to explain, How you can display popup in your Application?

Here I am JQuery popup.To use JQuery popup, first you have to include following JS and CSS files in your project.

JS Files-

jquery-1.4.2.js
jquery-ui-1.8.2.custom.min.js

CSS Files-

jquery-ui-1.8.4.custom.css

Just place these files in your project like this-

Now just include these files in your .aspx file like this-

<head runat="server">
    <title>Jquery PopUp Demo</title>

    <link href="JQueryCSS/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
    <script src="JQuerJS/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="JQuerJS/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        function funDisplayPopUp() {
            $('#dialogDiv').dialog({ resizable: false, height: 200, modal: true });
            return false;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <center>
    <div>
        <asp:Button ID="btnDisplayPopup" runat="server" Text ="Display Popup" OnClientClick="return funDisplayPopUp();" />
        <div id="dialogDiv" title="Information" style ="display:none ">
             Hello Dear
        </div>
    </div>
    </center>
    </form>
</body>

Note-

In this example first set display:none for div, which will be displayed as popup.

<div id="dialogDiv" title="Information" style ="display:none ">
             Hello Dear
</div>

Now done, when you will run this project, you will get one button control on form, when you will click on that button one popup window will be displayed like this-

Note- You can put server controls in this popup to control action based on your need.

Thanks

Step towards Dot Net

Pages

Sunday, December 25, 2011

Jquery popup window in ASP.Net.

2 comments: