ModalPopupExtender

最新推荐文章于 2009-02-18 11:30:00 发布

stromboy007

最新推荐文章于 2009-02-18 11:30:00 发布

阅读量1.2k

点赞数

分类专栏： Ajax ControlToolkit 文章标签： hyperlink server asp class button filter

本文链接：https://blog.csdn.net/stromboy007/article/details/3899086

版权

Ajax ControlToolkit 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ModalPopupExtender</title>
    <style type="text/css">
    .modalBackground
    {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
    }
    .modalPopuo
    {
              background-color:#ffffdd;
              border-width:3px;
              border-style:solid;
              border-color:Gray;
              padding:3px;
              width:250px;
      }
    .modalPopup
    {
      background-color:#ffffdd;
      border-width:3px;
      border-style:solid;
      border-color:Gray;
      padding:3px;
      width:250px;
      }
      .sampleStyleA
      { background-color:#FFF;}
      .sampleStyleB
      {
       background-color:#FFF;
       font-family:Monospace;
       font-size:10pt;
       font-weight:bold;
       }
       .sampleStyleC
       {
        background-color:#ddffdd;
        font-family:Sans-Serif;
        font-size:10pt;
         font-size:italic;
        }
        .sampleStyleD
        {
         background-color:Blue;
         color:White;
         font-family:Arial;
         font-size:10pt;
         }
    </style>
    <script type="text/javascript">
    var styleToSelect;
    function onOk()
    {
       $get('Pargraph1').className=styleToSelect;
    }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:HyperLink ID="HyperLink1" runat="server">点击更换页面样式</asp:HyperLink>
        <p id="Pargraph1">
        这里是第二章的故事：从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。<br />
        从前有座山，山上有个庙。庙里有个和尚讲故事，讲什么故事呢。。。   <br /></p>
        <asp:Panel ID="Panel1" runat="server" style="display:none" CssClass="modalPopup">
            <asp:Panel ID="Panel2" runat="server" Width="309px">
            <div>
            <p>请选择页面风格：</p>
            <p><input type="radio" name="Radio" id="RadioA" checked="checked" οnclick="styleToSelect='sampleStyleA';" />
            <label for="RadioA" class="sampleStyleA" style="padding:3px;">风格样式一</label>
            </p>
               <p><input type="radio" name="Radio" id="RadioB" οnclick="styleToSelect='sampleStyleB';" />
            <label for="RadioB" class="sampleStyleB" style="padding:3px;">风格样式二</label>
            </p>
                <p><input type="radio" name="Radio" id="RadioC" οnclick="styleToSelect='sampleStyleC';" />
            <label for="RadioC" class="sampleStyleC" style="padding:3px;">风格样式三</label>
            </p>
                <p><input type="radio" name="Radio" id="RadioD" οnclick="styleToSelect='sampleStyleD';" />
            <label for="RadioD" class="sampleStyleD" style="padding:3px;">风格样式四</label>
            </p>
            <p>
            <label class="sampleStyleD" for="RadioD" style=" padding-right:3px; padding-left:3px; padding-bottom:3px; padding-top:3px;">
            <span style=" font-size:12pt"><span style=""><span style="color:#000000"></span></span></span>
            </label>
            <asp:Button ID="OkButton" runat="server" Text="确定" />
            <asp:Button ID="CancelButton" runat="server" Text="取消" />
            </p>
            </div>
            </asp:Panel>
        </asp:Panel>
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
         TargetControlID="HyperLink1" PopupControlID="Panel1"
            BackgroundCssClass="modalBackground" OkControlID="OkButton"
            CancelControlID="CancelButton" Drag="True" DropShadow="True"
            PopupDragHandleControlID="Panel2" onokscript="onOk()">
        </cc1:ModalPopupExtender>
    </div>
    </form>
</body>
</html>

stromboy007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
ModalPopupExtender

http://www.w3.org/1999/xhtml" > ModalPopupExtender .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopuo { b
复制链接

扫一扫