locked
problem with Ajax pop up extender RRS feed

  • Question

  • Hi,

    I am using ajax popup extender for dispalyig confirm dialog box.

    I want to show two popups one after anothr.But When I display one using popup.show() and then second ,

    both popups are getting overwritten.My code is something like this,

    fun()

    {

        fun1();

    popup2.show();

    }

    fun1()

    {

    //...

     popup1.show();

    }

    here popup1 and popup2 are dispalyning same time.

    Wednesday, February 29, 2012 5:40 AM

Answers

  • Hi, you can try the following method, after clicking the button, it will open popup1; after clicking “OK” button on popup1, it will close itself and open popup2.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <style type="text/css"> 
            #div1
            {
                background-color:Green;
            }
            #div2
            {
                background-color:Gray;
            }
        </style>
          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#div1').dialog({
                    autoOpen: false,
                    buttons:
                    {
                        "OK": function () {
                            $('#div1').dialog("close");
                            $('#div2').dialog("open");
                        },
                        "close": function () {
                            $('#div1').dialog("close");
                        }
                    }
                });
                $('#div2').dialog({
                    autoOpen: false
                });
    
                $('#Button1').click(function () {
                    $('#div1').dialog("open");
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div id="div1">This is div 1 popup</div>
        <div id="div2">This is div 2 popup</div>
            <input id="Button1" type="button" value="button" />
        </div>
        </form>
    </body>
    </html>
    

    Thursday, March 1, 2012 11:19 AM

All replies

  • Hi,

    see http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

    The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that  can have a custom style applied to it.            

                When displayed, only the modal content can  be interacted with; clicking on the rest of the page does nothing. 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. If  a postback is required, simply allow the OK/Cancel control to postback and the page         to re-render. You can also 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.           


    Rob^_^

    Wednesday, February 29, 2012 6:39 AM
  • I have OK/Cancel buttons on popup1.

    When I click on any button both popups dismisses.

    Wednesday, February 29, 2012 12:38 PM
  • try something like

    function fun1(){

    return popup1.show();

    }

    I am not sure of the exact syntax... but the sample page should show that. functions always have an implied return value... subroutines are nilladic.

    Regards.


    Rob^_^

    Wednesday, February 29, 2012 10:53 PM
  • Hi, you can try the following method, after clicking the button, it will open popup1; after clicking “OK” button on popup1, it will close itself and open popup2.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <style type="text/css"> 
            #div1
            {
                background-color:Green;
            }
            #div2
            {
                background-color:Gray;
            }
        </style>
          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#div1').dialog({
                    autoOpen: false,
                    buttons:
                    {
                        "OK": function () {
                            $('#div1').dialog("close");
                            $('#div2').dialog("open");
                        },
                        "close": function () {
                            $('#div1').dialog("close");
                        }
                    }
                });
                $('#div2').dialog({
                    autoOpen: false
                });
    
                $('#Button1').click(function () {
                    $('#div1').dialog("open");
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div id="div1">This is div 1 popup</div>
        <div id="div2">This is div 2 popup</div>
            <input id="Button1" type="button" value="button" />
        </div>
        </form>
    </body>
    </html>
    

    Thursday, March 1, 2012 11:19 AM