大家来讨论一个ModalPopup的问题!

Question

            <div ID="Div" style="left: 232px; width: 592px; position: absolute; top: 8px; height: 473px">
                <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnOpen"
                    CancelControlID="btnClose" PopupControlID="Panel1">
                </cc1:ModalPopupExtender>
                <div id="Panel1" runat="server" class="bgcss">
                    hello<br />
                    <asp:Button ID="btnClose" runat="server" Text="关闭" />
                </div>
            </div>
            <asp:Button ID="btnOpen" runat="server" Text="打开" />
============================问题分割线========================================
按理说ModalPopup显示出的模态对话框应该是占满了整个屏幕，比较说如下代码显示的效果：
            <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnOpen"
                CancelControlID="btnClose" PopupControlID="Panel1">
            </cc1:ModalPopupExtender>
            <div id="Panel1" runat="server" class="bgcss">
                hello<br />
                <asp:Button ID="btnClose" runat="server" Text="关闭" />
            </div>
            <asp:Button ID="btnOpen" runat="server" Text="打开" />
但是第一段代码把ModalPopup和对话框的内容放在了一个层里，这个层是在页面中的某一个位置，而显示出来的效果却是
下面的面板是从div1那个层开始的位置显示的。
其中用到的CSS：
   .bgcss
    {
      background-color:blue;
      filter:alpha(opacity=70);
      opacity:0.7; 
      position: absolute;
      top:1px;
      left:1px;
    } 
我的问题是如何能够让第一段代码实现第二段代码的效果。
============================微软MSDN提供的资料===================================== Figure 1 ModalPopupExtender 控件的详细信息
// Code excerpted from modalpopupbehavior.js.
// Method initialize()
//
// Download the source code of the AJAX Control Toolkit from 
// http://www.codeplex.com/atlascontroltoolkit.
//// The panel defined as the popup is saved as the foreground element.
this._foregroundElement = this._popupElement;// A new DIV tag is created as the background element for the panel.
// The panel is invisible and placed at 0,0 coordinates (fixed position).
// In addition, the background element is given a high z-index so that it
// sits above everything else.
this._backgroundElement = document.createElement('div');
this._backgroundElement.id = this.get_id() + '_backgroundElement';
this._backgroundElement.style.display = 'none';
this._backgroundElement.style.position = 'fixed';
this._backgroundElement.style.left = '0px';
this._backgroundElement.style.top = '0px';
this._backgroundElement.style.zIndex = 10000;// The background element is styled as specified.
if (this._BackgroundCssClass) 
{
     this._backgroundElement.className = this._BackgroundCssClass;
}// The background element is appended to the parent of the foreground 
// element.
this._foregroundElement.parentNode.appendChild(this._backgroundElement);// The foreground element is programmatically hidden from view. In 
// addition, it is given absolute positioning and an higher z-index than 
// the background element.
this._foregroundElement.style.display = 'none';
this._foregroundElement.style.position = 'fixed';
this._foregroundElement.style.zIndex = $common.getCurrentStyle(
this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;// A click handler is added to the target element of the extender. In
// this case, It is the DOM element whose ID is passed on as the 
// TargetControlID property.
this._showHandler = Function.createDelegate(this, this._onShow);
$addHandler(this.get_element(), 'click', this._showHandler);

Answer 1

没怎么看懂楼主的问题!!
是不是想控制弹出的Panel1的位置??
如果是,可以在btnOpen的扩展属性中设置!!

Answer 2

<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
            <asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
                <div>
                    <p>Choose the paragraph style you would like:</p>
                </div>
            </asp:Panel>
                <div>
                    <p>
                        <input type="radio" name="Radio" id="RadioA" checked="checked"
                            onclick="styleToSelect = 'sampleStyleA';" />
                        <label for="RadioA" class="sampleStyleA"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioB"
                            onclick="styleToSelect = 'sampleStyleB';" />
                        <label for="RadioB" class="sampleStyleB"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioC"
                            onclick="styleToSelect = 'sampleStyleC';" />
                        <label for="RadioC" class="sampleStyleC"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioD"
                            onclick="styleToSelect = 'sampleStyleD';" />
                        <label for="RadioD" class="sampleStyleD"
                            style="padding: 3px;">Sample paragraph text</label>
                    </p>
                    <p style="text-align: center;">
                        <asp:Button ID="OkButton" runat="server" Text="OK" />
                        <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
                    </p>
                </div>
        </asp:Panel>
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" 
            TargetControlID="LinkButton1"
            PopupControlID="Panel1" 
            BackgroundCssClass="modalBackground" 
            OkControlID="OkButton"
            OnOkScript="onOk()" 
            CancelControlID="CancelButton" 
            DropShadow="true"
            PopupDragHandleControlID="Panel3" />