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>