locked
slide toggle doesn't work in modalpopup RRS feed

  • Question

  • User702049738 posted

    Hello experts;

    I have the following sample code below, unfortnately the slide toggle doesn't work in modal popup and I can't figure out why. THanks in advance

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

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

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

        <title></title>

        <style>

            #mdiv {

                height: 120px;

                width: 200px;

                margin-top: 20px;

                background-color: green;

                color: white;

                font-size: 20px;

                font-weight: bold;

                text-align: center;

            }

            .modalBackground {

                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>

    </head>

    <body>

        <form id="form1" runat="server">

            <asp:ScriptManager ID="ScriptManager1" runat="server">

            </asp:ScriptManager>

            <asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />

            <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnshow" CancelControlID="btnclose" BackgroundCssClass="modalbackground"></cc1:ModalPopupExtender>

            <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none; width: 500px; height: 500px">

                ModalPopupExtender<br />

                <button onclick="slideToggle()">SlideToggle</button>

                <div id="mdiv">Some context</div>

                <asp:Button ID="btnClose" runat="server" Text="Close" BackColor="Red" />

            </asp:Panel>

        </form>

        <script type="text/javascript">

            var open = true;

            var heightChecked = false;

            var initHeight = 0;

            var intval = null;

            function slideToggle() {

                window.clearInterval(intval);

                var mdiv = document.getElementById('mdiv');

                if (!heightChecked) {

                    initHeight = mdiv.offsetHeight;

                    heightChecked = true;

                }

                if (open) {

                    var h = initHeight;

                    open = false;

                    intval = setInterval(function () {

                        h--;

                        mdiv.style.height = h + 'px';

                        if (h <= 0)

                            window.clearInterval(intval);

                    }, 1

                    );

                }

                else {

                    var h = 0;

                    open = true;

                    intval = setInterval(function () {

                        h++;

                        mdiv.style.height = h + 'px';

                        if (h >= initHeight)

                            window.clearInterval(intval);

                    }, 1

                    );

                }

            }

        </script>

    </body>

    </html>

    Thursday, November 23, 2017 2:28 PM

All replies

  • User-707554951 posted

    Hi olybobo

    Code for test as  below :

     <style>
                    #mdiv {
                height: 120px;
                width: 200px;
                margin-top: 20px;
                background-color: green;
                color: white;
                font-size: 20px;
                font-weight: bold;
                text-align: center;
            }
    
                    .modalBackground {
                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>
            <script type="text/javascript">
            var open = true;
            var heightChecked = false;
            var initHeight = 0;
            var intval = null;
            function slideToggle() {
                window.clearInterval(intval);
                var mdiv = document.getElementById('mdiv');
                if (!heightChecked) {
                    initHeight = mdiv.offsetHeight;
                    heightChecked = true;
                }
                if (open) {
                    var h = initHeight;
                    open = false;
                    intval = setInterval(function () {
                        h--;
                        mdiv.style.height = h + 'px';
                        if (h <= 0)
                            window.clearInterval(intval);
                    }, 1
                    );
                }
                else {
                    var h = 0;
                    open = true;
                    intval = setInterval(function () {
                        h++;
                        mdiv.style.height = h + 'px';
                        if (h >= initHeight)
                            window.clearInterval(intval);
                    }, 1
                    );
                }
            }
    
        </script>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
    
                <ajaxToolkit:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnshow" CancelControlID="btnclose" BackgroundCssClass="modalbackground"></ajaxToolkit:ModalPopupExtender>
    
                <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none; width: 500px; height: 500px">
                    ModalPopupExtender<br />
    
                    <input id="Button1" type="button" value="SlideToggle" onclick="slideToggle()" />
                    <div id="mdiv">Some context</div>
    
                    <asp:Button ID="btnClose" runat="server" Text="Close" BackColor="Red" />
    
                </asp:Panel>

    Above code behave as below:

    I supposed that you want something about below:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script type="text/javascript">
    
            function slideToggle() {
        $("#mdiv").slideToggle();
            }
    
        </script>
      <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none; width: 500px; height: 500px">
                    ModalPopupExtender<br />
                    <input id="Button1" type="button" value="SlideToggle" onclick="slideToggle()" />
                    <div id="mdiv">Some context</div>    
                 <p><asp:Button ID="btnClose" runat="server" Text="Close" BackColor="Red" /></p>  
                </asp:Panel>

    Output:

    Related link:

    https://www.w3schools.com/jquery/eff_slidetoggle.asp

    Best regards

    Cathy

    Friday, November 24, 2017 7:15 AM
  • User702049738 posted

    I only want to do this in javascript., if I add a textbox to the div, it doesn't work as expected. Hence is there a work around for the addition of a textbox. thanks

    <style>
                    #mdiv {
                height: 120px;
                width: 200px;
                margin-top: 20px;
                background-color: green;
                color: white;
                font-size: 20px;
                font-weight: bold;
                text-align: center;
            }
    
                    .modalBackground {
                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>
            <script type="text/javascript">
            var open = true;
            var heightChecked = false;
            var initHeight = 0;
            var intval = null;
            function slideToggle() {
                window.clearInterval(intval);
                var mdiv = document.getElementById('mdiv');
                if (!heightChecked) {
                    initHeight = mdiv.offsetHeight;
                    heightChecked = true;
                }
                if (open) {
                    var h = initHeight;
                    open = false;
                    intval = setInterval(function () {
                        h--;
                        mdiv.style.height = h + 'px';
                        if (h <= 0)
                            window.clearInterval(intval);
                    }, 1
                    );
                }
                else {
                    var h = 0;
                    open = true;
                    intval = setInterval(function () {
                        h++;
                        mdiv.style.height = h + 'px';
                        if (h >= initHeight)
                            window.clearInterval(intval);
                    }, 1
                    );
                }
            }
    
        </script>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
    
                <ajaxToolkit:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnshow" CancelControlID="btnclose" BackgroundCssClass="modalbackground"></ajaxToolkit:ModalPopupExtender>
    
                <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none; width: 500px; height: 500px">
                    ModalPopupExtender<br />
    
                    <input id="Button1" type="button" value="SlideToggle" onclick="slideToggle()" />
                    <div id="mdiv">Some context 
    <asp:TextBox ID = "txt1" runat="server"></asp:TextBox></div>

    <asp:Button ID="btnClose" runat="server" Text="Close" BackColor="Red" />

    </Panel>

     

    Saturday, November 25, 2017 10:19 AM