类似于新浪博客；添加关注的浮动框：使用微软的MopUp控件仿作的

最新推荐文章于 2024-07-29 23:17:45 发布

a726400940

最新推荐文章于 2024-07-29 23:17:45 发布

阅读量106

点赞数

文章标签： xhtml javascript ui ViewUI

原文链接：http://www.cnblogs.com/qiliping/archive/2011/07/26/2117411.html

版权

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit.Design;
using AjaxControlToolkit.HTMLEditor;
using AjaxControlToolkit.MaskedEditValidatorCompatibility;

namespace Jsdemo
{
public partial class framedemo : System.Web.UI.Page
    {
protected void Page_Load(object sender, EventArgs e)
        {
        }
protected void Editor1_ContentChanged(object sender, EventArgs e)
        {
            Response.Write(Editor1.Content.ToString());    
        }      
    }
}

后台

View Code

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="framedemo.aspx.cs" Inherits="Jsdemo.framedemo" %>
 2 
 3 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
 4     TagPrefix="cc1" %>
 5 
 6 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 7 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
 8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 9 <html xmlns="http://www.w3.org/1999/xhtml">
10 <head runat="server">
11     <title></title>
12     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
13     <script type="text/javascript" language="javascript">
14         function btn_Cancel_Click(ev) {
15             ev.preventDefault();
16             var modalPopupBehavior = $find('showInfo');
17             modalPopupBehavior.show();
18         }
19         function btn_Ok_Click(ev) {
20             ev.preventDefault();
21             var modalPopupBehavior = $find('showInfo');
22             modalPopupBehavior.hide();
23         }
24         
25     </script>
26 </head>
27 <body>
28     <form id="form1" runat="server">
29     <asp:ScriptManager runat="server" ID="Manger">
30     </asp:ScriptManager>
31     <asp:ModalPopupExtender ID="PopUp" runat="server" CancelControlID="btn_Cancel" OkControlID="btn_Ok"
32         TargetControlID="Lbtn_show" PopupControlID="showInfo" BackgroundCssClass="modalBackground"
33         DropShadow="true" OnOkScript="btn_Ok_Click" OnCancelScript="btn_Cancel_Click"
34         RepositionMode="RepositionOnWindowScroll">
35     </asp:ModalPopupExtender>
36     <asp:LinkButton runat="server" ID="Lbtn_show">+加关注</asp:LinkButton>
37     <table runat="server" id="showInfo" class="modalPopup">
38         <tr style="color: White; background-color:White; border-color: White; height: 10%;">
39         <td align="left">备注：</td>
40             <td align="right"> <img alt="" width="15px" height="15px" title="关闭" src="Images/close.png" onclick="javascript:btn_Cancel_Click();" />
41             </td>
42            
43         </tr>
44         <tr style="height: 70%;">
45             <td colspan="2">
46                <%-- <asp:TextBox runat="server" Height="100px" Width="100%" TextMode="MultiLine" ID="txt_Input"></asp:TextBox>--%><cc1:Editor
47                    ID="Editor1" runat="server"  Height="100px" Width="100%" 
48                     oncontentchanged="Editor1_ContentChanged" />
49             </td>
50         </tr>
51         <tr style="color: White; background-color: Blue; border-color: White; height: 20%;">
52             <td align="center">
53                 <asp:Button runat="server" Text="保存" ID="btn_Ok" />
54             </td>
55             <td align="center">
56                 <asp:Button runat="server" Text="取消" ID="btn_Cancel" />
57             </td>
58         </tr>
59     </table>
60     </form>
61 </body>
62 </html>

样式

View Code

/*Modal Popup*/
.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.modalPopup {
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:250px;
}

.modalPopup p {
    padding: 5px;
}

.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-style:italic;
}

.sampleStyleD {
    background-color:Blue;
    color:White;
    font-family:Arial;
    font-size:10pt;
}

/*Popup Control*/
.popupControl{
    background-color:White;
    position:absolute;
    visibility:hidden;
}

：

转载于:https://www.cnblogs.com/qiliping/archive/2011/07/26/2117411.html

a726400940

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似于新浪博客；添加关注的浮动框：使用微软的MopUp控件仿作的

View Code using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using AjaxControlToolkit.Design;using AjaxContro...
复制链接

扫一扫