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

简介: View Code using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.
img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 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());
}
}
}

后台

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 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>

样式

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 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;
}

目录
相关文章
|
5天前
|
云安全 人工智能 安全
AI被攻击怎么办?
阿里云提供 AI 全栈安全能力,其中对网络攻击的主动识别、智能阻断与快速响应构成其核心防线,依托原生安全防护为客户筑牢免疫屏障。
|
15天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
9天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
590 212
|
4天前
|
编解码 Linux 数据安全/隐私保护
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
234 138
|
存储 人工智能 监控
从代码生成到自主决策:打造一个Coding驱动的“自我编程”Agent
本文介绍了一种基于LLM的“自我编程”Agent系统,通过代码驱动实现复杂逻辑。该Agent以Python为执行引擎,结合Py4j实现Java与Python交互,支持多工具调用、记忆分层与上下文工程,具备感知、认知、表达、自我评估等能力模块,目标是打造可进化的“1.5线”智能助手。
828 60
|
7天前
|
人工智能 移动开发 自然语言处理
2025最新HTML静态网页制作工具推荐:10款免费在线生成器小白也能5分钟上手
晓猛团队精选2025年10款真正免费、无需编程的在线HTML建站工具,涵盖AI生成、拖拽编辑、设计稿转代码等多种类型,均支持浏览器直接使用、快速出图与文件导出,特别适合零基础用户快速搭建个人网站、落地页或企业官网。
1224 157
|
6天前
|
存储 安全 固态存储
四款WIN PE工具,都可以实现U盘安装教程
Windows PE是基于NT内核的轻量系统,用于系统安装、分区管理及故障修复。本文推荐多款PE制作工具,支持U盘启动,兼容UEFI/Legacy模式,具备备份还原、驱动识别等功能,操作简便,适合新旧电脑维护使用。
515 109