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

目录
相关文章
|
8月前
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
127 1
|
9月前
|
C#
CSDN博客炫丽图标调整字体大小和颜色
CSDN博客炫丽图标调整字体大小和颜色
76 0
|
10月前
关于Axure隐藏滚动条
关于Axure隐藏滚动条
97 0
OFFICE技术讲座:边框的3D与方框的区别
OFFICE技术讲座:边框的3D与方框的区别
46 0
OFFICE技术讲座:边框的3D与方框的区别
|
C#
艾伟_转载:在WPF里面实现以鼠标位置为中心缩放移动图片
  在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面,介绍了如何在WPF里面移动和放大缩小图片,程序也支持使用滚轮的方式缩放图片。然而前面文章里介绍的缩放功能只能以图片中心为原点来实现,但是这种功能往往并不是客户想要的,我们看图片的时候,往往都喜欢以鼠标放在图片的焦点为原点进行图片的缩放。
1143 0
|
前端开发
如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1095 0
|
测试技术 C#
WPF 设置控件阴影后,引发的Y轴位置变化问题
原文:WPF 设置控件阴影后,引发的Y轴位置变化问题 背景 最近遇到一个动画执行时,文本位置变化的问题。如下图: 如果你仔细看的话,当星星变小时,文本往下降了几个像素。 貌似有点莫名其妙,因为控件之间并不在同一个Panel布局控件中,不存在高度限制变化引发此类问题。
1018 0
|
C#
WPF 实现波浪浮动效果
原文:WPF 实现波浪浮动效果 目标:实现界面图标Load时,整体图标出现上下波浪浮动效果,如下图: 前台代码:                                       ...
1289 0
|
C#
好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字
原文:好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.
987 0