slide toggle doesn't work in modalpopup

Reply

olybobo

Member

141 Points

827 Posts

slide toggle doesn't work in modalpopup

Nov 23, 2017 02:28 PM|olybobo|LINK

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>

<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>

<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>

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>

Reply

Cathy Zou

Star

8650 Points

2882 Posts

Re: slide toggle doesn't work in modalpopup

Nov 24, 2017 07:15 AM|Cathy Zou|LINK

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:

Re: slide toggle doesn't work in modalpopup

Nov 25, 2017 10:19 AM|olybobo|LINK

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>

slide toggle doesn't work in modalpopupRSS

2 replies

Shortcuts

Related Links

slide toggle doesn't work in modalpopup

Re: slide toggle doesn't work in modalpopup

Re: slide toggle doesn't work in modalpopup