模态弹出窗口之自定义控件问题

灵雨飘零 2010-05-27 02:31:45

做了一个弹出窗口。
实现如下图示效果：

为了节省页面代码，打算做成一个用户控件（套用边框及样式）。

自定义控件前台代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ModupopupWin.ascx.cs"

    Inherits="Web.Controls.ModupopupWin" %>

<div>

    <div style="background-image: url(/Images/Windows/Caption.jpg); height: 24px; width: 100%">

        <div style="float: left; background-image: url(/Images/Windows/LeftTop.jpg); width: 4px;

            height: 26px; border: 0px; padding: 0px">

        </div>

        <div style="float: right; background-image: url(/Images/Windows/RightTop.jpg); width: 4px;

            height: 26px; border: 0px; padding: 0px">

        </div>

        <div style="float: right; margin-top: 6px; margin-right: 5px">

            <asp:ImageButton ID="imgClose" runat="server" OnClientClick="$find('ModalPopup').hide(); return false; "

                ImageUrl="/Images/Windows/Close.jpg" CausesValidation="False" />

        </div>

        <div style="float: left; height: 20px; vertical-align: middle; margin-top: 6px; margin-left: 10px">

            <asp:UpdatePanel ID="UpdatePanelTitle" runat="server">

                <ContentTemplate>

                    <asp:Label ID="lblCaption" runat="server" Font-Bold="True" ForeColor="White"></asp:Label>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

    </div>

    <div style="border-left: 4px solid #344579; border-right: 4px solid #344579; border-top: 4px none #344579;

        border-bottom: 4px solid #344579; width: auto; height: auto;" runat="server"

        id="DivContent">

        <div style="margin-bottom: 10px; margin-top: 0px">

            <asp:PlaceHolder ID="pnlConttent" runat="server"></asp:PlaceHolder>

        </div>

    </div>

</div>

后台代码：



using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;



namespace Web.Controls

{

    public partial class ModupopupWin : System.Web.UI.UserControl

    {

        protected void Page_Load(object sender, EventArgs e)

        {



        }

        /// <summary>

        /// 窗口标题

        /// </summary>

        public string CapationText

        {

            get { return lblCaption.Text; }

            set { lblCaption.Text = value; }

        }







        public void AddPanel(Control p)

        {

            pnlConttent.Controls.Add(p);

        }

    }

}

引用用户用户页面代码：

<form id="form1" runat="server">

    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </ajaxToolkit:ToolkitScriptManager>

    <div>

        <table width="100%">

            <tr>

                <td align="center">

                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

                </td>

            </tr>

        </table>

        <div>

            <ajaxToolkit:ModalPopupExtender ID="ModalPopup" runat="server" PopupControlID="Panel1"

                TargetControlID="btnPopup">

            </ajaxToolkit:ModalPopupExtender>

            <asp:Button ID="btnPopup" Style="display: none" runat="server" />

            <asp:Panel runat="server" ID="Panel1" Width="300px">

                <uc2:ModupopupWin ID="ModupopupWin1" runat="server" />

                <asp:Panel runat="server" ID="pnl">

                    <table>

                        <tr>

                            <td>

                                标题：

                            </td>

                            <td>

                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                            </td>

                        </tr>

                    </table>

                </asp:Panel>

            </asp:Panel>

        </div>

    </div>

    </form>

后台代码：

 protected void Page_Load(object sender, EventArgs e)

        {



          



        }



        protected void Button1_Click(object sender, EventArgs e)

        {

            ModupopupWin1.Controls.Add(pnl);

            ModalPopup.Show();

        }

这样执行后出现的弹出页面却是这样：

这样做难道有问题吗?不知道问题出在哪里。

能解决问题高分相赠，不够另加

大家还有其他方式把内容加到这个用户控件中吗？因为我打算用这个弹出窗口的外观样式。

...全文

284 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

cqwxzgy 2012-01-06

打赏
举报

能不能把你的图片给我下啊。。我也想做这个效果……

cqwxzgy 2012-01-06

打赏
举报

你用这个添加的
ModupopupWin1.Controls.Add(pnl);
但是你写了addPannel方法没有用……

灵雨飘零 2010-06-01

打赏
举报

CSDN高手都隐身了？？？？

灵雨飘零 2010-05-31

打赏
举报

期待高手解决Ing。。。。。。

灵雨飘零 2010-05-28

打赏
举报

[Quote=引用 9 楼 wuyq11 的回复:]
看看页面源码，样式设置
弹出模式窗体,jwindow就可
[/Quote]

页面源码显示没有将<asp:Panel runat="server" ID="pnl">中的内容放到<uc2:ModupopupWin ID="ModupopupWin1" runat="server" />中。

是不是我写的方法不对啊？

wuyq11 2010-05-27

打赏
举报

看看页面源码，样式设置
弹出模式窗体,jwindow就可

灵雨飘零 2010-05-27

打赏
举报

[Quote=引用 5 楼 antiking 的回复:]
高度和宽度不够。
[/Quote]

不是高度和宽度不够吧，好像是没有把
<asp:Panel runat="server" ID="pnl">放到<uc2:ModupopupWin ID="ModupopupWin1" runat="server" />中

灵雨飘零 2010-05-27