MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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><scripttype="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:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><asp:ButtonID="btnShow"runat="server"Text="Show Modal Popup"/><ajaxToolkit:ModalPopupExtenderID="mp1"runat="server"PopupControlID="Panel1"TargetControlID="btnshow"CancelControlID="btnclose"BackgroundCssClass="modalbackground"></ajaxToolkit:ModalPopupExtender><asp:PanelID="Panel1"runat="server"CssClass="modalPopup"align="center"Style="display: none;width:500px;height:500px">
ModalPopupExtender<br/><inputid="Button1"type="button"value="SlideToggle"onclick="slideToggle()"/><divid="mdiv">Some context <asp:TextBox ID = "txt1" runat="server"></asp:TextBox></div>
Member
141 Points
831 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>
<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>
Star
8670 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 :
Above code behave as below:
I supposed that you want something about below:
Output:
Related link:
https://www.w3schools.com/jquery/eff_slidetoggle.asp
Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
141 Points
831 Posts
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