类似于新浪博客;添加关注的浮动框:使用微软的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 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;
}

你可能感兴趣的:(UP)