If you are using the inline asp.net spell checker with a text box that is inside a ModalPopUp (from the AJAX toolkit) then the following is necessary
to iron out some integration issues (menu bar positioning and page scroll affecting the menu bar, and our overlay DIVs being hidden).
1. Add this JS script to your page
<script type="text/javascript">
/* These first two functions can be dropped onto any page, they are automatically hooked up */
/* Give the built in measurement functions a tweak for AJAX */
function rsw_getContextMenuOffsetX(x, errorElement, activeTextbox, e){
var b = Sys.UI.DomElement.getBounds(activeTextbox.iframe);
var c = Sys.UI.DomElement.getBounds(errorElement);
return b.x-x+c.x+20;//20 gives us some room to see the word
}
/* Give the built in measurement functions a tweak for AJAX */
function rsw_getContextMenuOffsetY(y, errorElement, activeTextbox, e){
var b = Sys.UI.DomElement.getBounds(activeTextbox.iframe);
var c = Sys.UI.DomElement.getBounds(errorElement);
oldScrollTop = getScrollTop();
if(navigator.userAgent.indexOf("Gecko")==-1)
return b.y-y+c.y+20;//20 gives us some room to see the word
else
return b.y-y+c.y+20+oldScrollTop;
}
var oldScrollTop;
/* Move the suggestion menu if the page scrolls */
function scroll_handler(){
if(rsw_contextMenu!=null){
rsw_contextMenu.y += getScrollTop() - oldScrollTop;
oldScrollTop = getScrollTop();
rsw_contextMenu.moveCMElement();
}
}
function getScrollTop(){
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0){
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
return ScrollTop;
}
/* Hook up the scroll handler that moves the menu, and
add a handler (cpc) to put the popup extender behind our floating DIVs
*/
function pageLoad(sender, e) {
$find('ModalPopupExtender1').add_shown(cpc);
onscroll = scroll_handler;
rsw_autoFocusAfterAJAX = false;
}
function cpc(ev) {
$find('ModalPopupExtender1')._foregroundElement.style.zIndex = "997";
$find('ModalPopupExtender1')._popupElement.style.zIndex = "996";
$find('ModalPopupExtender1')._backgroundElement.style.zIndex = "995";
}
</script>
2. This assumes that the modal popup is named 'ModalPopupExtender1' (edit the script and change the name if necessary).
After making these changes the RapidSpellWInline spell checker should work nicely with ModalPopUpExtender.
Here’s a complete example.
ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="modalpopup.aspx.cs" Inherits="modalpopup" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register TagPrefix="rapidspellweb" Namespace="Keyoti.RapidSpell" Assembly="Keyoti.RapidSpellWeb.ASP.NETv2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
/* These first two functions can be dropped onto any page, they are automatically hooked up */
/* Give the built in measurement functions a tweak for AJAX */
function rsw_getContextMenuOffsetX(x, errorElement, activeTextbox, e){
var b = Sys.UI.DomElement.getBounds(activeTextbox.iframe);
var c = Sys.UI.DomElement.getBounds(errorElement);
return b.x-x+c.x+20;//20 gives us some room to see the word
}
/* Give the built in measurement functions a tweak for AJAX */
function rsw_getContextMenuOffsetY(y, errorElement, activeTextbox, e){
var b = Sys.UI.DomElement.getBounds(activeTextbox.iframe);
var c = Sys.UI.DomElement.getBounds(errorElement);
oldScrollTop = getScrollTop();
if(navigator.userAgent.indexOf("Gecko")==-1)
return b.y-y+c.y+20;//20 gives us some room to see the word
else
return b.y-y+c.y+20+oldScrollTop;
}
var oldScrollTop;
/* Move the suggestion menu if the page scrolls */
function scroll_handler(){
if(rsw_contextMenu!=null){
rsw_contextMenu.y += getScrollTop() - oldScrollTop;
oldScrollTop = getScrollTop();
rsw_contextMenu.moveCMElement();
}
}
function getScrollTop(){
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0){
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
return ScrollTop;
}
/* Hook up the scroll handler that moves the menu, and
add a handler (cpc) to put the popup extender behind our floating DIVs
*/
function pageLoad(sender, e) {
$find('ModalPopupExtender1').add_shown(cpc);
onscroll = scroll_handler;
rsw_autoFocusAfterAJAX = false;
}
function cpc(ev) {
$find('ModalPopupExtender1')._foregroundElement.style.zIndex = "997";
$find('ModalPopupExtender1')._popupElement.style.zIndex = "996";
$find('ModalPopupExtender1')._backgroundElement.style.zIndex = "995";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="c1">
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" dropshadow="false"
targetcontrolid="Button1"
popupcontrolid="SamplePanel"
>
</cc1:ModalPopupExtender>
<asp:Panel id="SamplePanel" style='display:none; border:1px solid blue;' runat='server'>
Some padding<br /><br /><br />
<rapidspellweb:RapidSpellWInlineTextBox ID="tb1" runat="server" Visible="true" />
<rapidspellweb:RapidSpellWInline RightClickForMenu="true" ID="RapidSpellWInline1"
TextComponentID="tb1" runat="server" RapidSpellWInlineHelperPage="rswihelper.aspx" />
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</form>
</body>
</html>