Advantages of modal popup , creating modal popup and how can we call it from client side as well as server side using asp.net(C#) and MVC..

Create a modal popup and enabling it onclick event from server and client side both.

Purpose:

Advantages of modal PopUp over  simple PopUP :     

è  More compatible, simple to create , flashy/pretty  and  jQueryUI-friendly.

è  The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.

è  You can  absolutely position a modal popup by setting the X and Y properties. By default it is centered on the page, however if just X or Y is specified then it is centered vertically or horizontally.

è  When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the modal content and optionally runs custom script.

è  The custom script will typically be used to apply whatever changes were made while the modal mode was active.

Java Script:

 Here I used modal popup for printing the selected data, for that I used two buttons, radio button list, and one lable for displaying message what are you going to do.

The classes I used for this popup are coming from common External CSS page.

<div class="modal fade" id="PopUpPrint" role="dialog">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                    <acg:ScLabel runat="server" Text="Confirmation"></acg:ScLabel>

                </div>

                <div class="modal-body">

                    <div class="divVerticalSpace"></div>

                    <acg:ScLabel runat="server" ID="ScLabel1" Text="What would you like to print?"></acg:ScLabel>

                    <acg:ScRadioButtonList ID="rdoPrint" runat="server" RepeatDirection="Horizontal" TextValueList="" CssClass="rdlAlign">

                    </acg:ScRadioButtonList>

                </div>

                <div class="modal-footer">

                    <acg:ScButton runat="server" ID="btnPrintYes" ValidationGroup="DeleteGroup" OnClientClick="PopUpClose();" OnClick="DownloadPDF_Click" />

                    <div class="divVerticalSpace"></div>

                    <acg:ScButton runat="server" ID="btnCancel1" data-dismiss="modal" OnClientClick="PopUpClose();return false;" />

                </div>

            </div>

        </div>

    </div>

CSS Styles  :

You will need to include the all CSS classes,I explaine some of them as per your design need u can modify it.

<style type="text/css">

    .modal-dailog

    {

        background-color: Black;

        filter: alpha(opacity=90);

        opacity: 0.8;

    }

    .modalPopup

    {

        background-color: #FFFFFF;

        border-width: 3px;

        border-style: solid;

        border-color: black;

        padding-top: 10px;

        padding-left: 10px;

        width: 300px;

        height: 140px;

    }

</style>

Also u need to register for common control or ajax control library.

<%@ Register Assembly="ACG.Common.Web.UI" Namespace="ACG.Common.Web.UI.ServerControls" TagPrefix="acg" %>

                                                                                                (OR)

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Call From sever side :

this.btnPrint.Attributes.Add("onClick", "return PopUpPrint();");

                                         (OR)

Call From client side :

<acg:ScButtonrunat="server"ID="btnPrint"OnClientClick="javascript:PopUpPrint()";return false;" />

Description:

è  ’ScLabel1’ is lable for displaying message.

è   ‘rdoPrint’ is radio-button-list used for different types of print(for selected item and whole data).

è  ‘btnPrintYes’ and ‘btnCancel1’ are two buttons used for print and cancel options.

è  ‘DownloadPDF_Click’ is server side created event and ‘PopUpClose()’ is client side function.

è  ‘class="modal-dialog’ are external css classes.

Experience:   

 I was using date picker on popup and  it was not picking date from calendar but when I used modal popup it was really Woking well.