Asked by:
slide toggle doesn't work in modalpopup

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