基于.Net实现前端对话框和消息框
关于前端对话框、消息框的优秀插件多不胜数。造轮子是为了更好的使用轮子，并不是说自己造的轮子肯定好。所以，这个博客系统基本上都是自己实现的，包括日志记录、响应式布局等等一些本可以使用插件的。好了，废话不多时。我们来实现自己的对话框和消息框。
对话框
要求：可拖动、点击按钮后可回调
画一个简单的模型框
<div class="hi-dialog-box clearfix">
<div class="hi-dialog-title">系统提示</div>
<div class="hi-dialog-content">
</div>
<div class="hi-dialog-foot">
<input type="button" class="hi-dialog-determine" value="确定" />
<input type="button" class="hi-dialog-cancel" value="取消" />
</div>
</div>
添上基本的样式
div.hi-dialog-box {
border: 1px #808080 solid;
width: 350px;
height: 200px;
border-radius: 3px;
}
div.hi-dialog-box div.hi-dialog-title {
border: 1px #808080 solid;
margin: 1px;
padding: 1px;
background-color: #dedcdc;
height: 14%;
cursor: move;
font-size: 20px;
}
div.hi-dialog-box div.hi-dialog-content {
height: 65%;
margin: 5px;
}
div.hi-dialog-box div.hi-dialog-foot {
margin: 1px;
padding: 1px;
height: 14%;
}
div.hi-dialog-box div.hi-dialog-foot input {
float: right;
margin-left: 5px;
font-size: 16px;
}
效果图：
是不是像那么回事了，不过现在还不能拖动。拖动，说白了就是在鼠标移动的时候不停的修改绝对定位。
首先修改以下样式：
用js代码实现拖动效果：
//鼠标按下时
$("div.hi-dialog-title").mousedown(function (event) {
$("html").unbind();//首先清除事件方法
var click_clientX = event.clientX;//记录鼠标按下时相对当前窗口的 x 坐标
var click_clientY = event.clientY;//记录鼠标按下时相对当前窗口的 y 坐标
//取的对话框容器
var dialogBox = $(this).closest("div.hi-dialog-box");
//记录对话框容器当前位置
var dialogBoxX = parseInt($(dialogBox).css("left"));
var dialogBoxY = parseInt($(dialogBox).css("top"));
//鼠标移动时
$("html").mousemove(dialog_mousemove = function (event) {
//鼠标按下后移动量加上原来的位置
var top = event.clientY - click_clientY + dialogBoxY;
var left = event.clientX - click_clientX + dialogBoxX;
//修改对话框位置（这里就实现了移动效果了）
$(dialogBox).css({ "left": left, "top": top });
});
//鼠标按键松开时
$("html").mouseup(function () {
//清除鼠标移动事件
$("html").unbind("mousemove", dialog_mousemove);
});
});
以上js代码就实现了对话框的拖动效果。首先，只有当鼠标在对话框标题区域按下鼠标才可以拖动，然后鼠标移动的的时候实时计算和改变容器的位置，最后如果鼠标按键松开这清除鼠标移动事件。
点击按钮后可回调
很多时候，我们点击确定或取消的时候我们需要执行回调（比如“您是否删除”，点击了确定后肯定需要做删除操作）。
如此，我们点击确定的时候会自动关闭对话框并可以执行自己需要执行的一些操作。可以，有同学会说，你这算什么狗屁对话框啊，html代码全都需要直接编码。是的，这只是简单的说下思路，下面我们来简单整理下。
效果图：
全部代码：（当然，这只是简单实现。还有很多需要继续细化的效果，如：背景遮罩、如果实现点击多次对话框）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
box-sizing: border-box;
}
.clearfix:after {
content: ' ';
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
div.hi-dialog-box {
border: 1px #808080 solid;
width: 350px;
height: 200px;
position: absolute;
top: 200px;
left: 40%;
border-radius: 3px;
}
div.hi-dialog-box div.hi-dialog-title {
border: 1px #808080 solid;
margin: 1px;
padding: 1px;
background-color: #dedcdc;
height: 14%;
cursor: move;
font-size: 20px;
}
div.hi-dialog-box div.hi-dialog-content {
height: 65%;
margin: 5px;
overflow: auto;
}
div.hi-dialog-box div.hi-dialog-foot {
margin: 1px;
padding: 1px;
height: 14%;
}
div.hi-dialog-box div.hi-dialog-foot input {
float: right;
margin-left: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<input value="对话框（确定）" onclick="click1();" type="button" />
<input value="对话框（确定、取消）" onclick="click2();" type="button" />
<div class="messg" style="margin: 10px; color: red; font-size: 23px"></div>
<script src="../../Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
var hiDialog = {
init: function (title, messg, determineCallback, cancelCallback) {
title = title || "系统提示";
var determine = "", cancel = "";
if (typeof (determineCallback) == "function")
determine = '<input type="button" class="hi-dialog-determine" value="确定" />';
if (typeof (cancelCallback) == "function")
cancel = '<input type="button" class="hi-dialog-cancel" value="取消" />';
if (!$("div.hi-dialog-box").length) {
var hi_dialog_box = '<div class="hi-dialog-box clearfix">\
<div class="hi-dialog-title"></div>\
<div class="hi-dialog-content">\
</div>\
<div class="hi-dialog-foot">\
</div>\
</div>';
$("body").append(hi_dialog_box);
}
var $box = $("div.hi-dialog-box");
$box.find("div.hi-dialog-title").html(title);
$box.find("div.hi-dialog-content").html(messg);
$box.find("div.hi-dialog-foot").html(determine + cancel);
$("div.hi-dialog-box").show();
$box.find(".hi-dialog-determine").click(function () {
determineCallback();
hiDialog.close();
});
$box.find(".hi-dialog-cancel").click(function () {
cancelCallback();
hiDialog.close();
});
//鼠标按下时
$("div.hi-dialog-title").mousedown(function (event) {
$("html").unbind();
var click_clientX = event.clientX;
var click_clientY = event.clientY;
var dialogBox = $(this).closest("div.hi-dialog-box");
var dialogBoxX = parseInt($(dialogBox).css("left"));
var dialogBoxY = parseInt($(dialogBox).css("top"));
//鼠标移动时
$("html").mousemove(dialog_mousemove = function (event) {
var top = event.clientY - click_clientY + dialogBoxY;
var left = event.clientX - click_clientX + dialogBoxX;
$(dialogBox).css({ "left": left, "top": top });
});
//鼠标按键松开时
$("html").mouseup(function () {
$("html").unbind("mousemove", dialog_mousemove);
});
});
},
close: function () {
$("div.hi-dialog-box").hide();
}
}
</script>
<script type="text/javascript">
function click1() {
hiDialog.init("系统提示！", "测试", function () {
//点击确定后的回调执行
$(".messg").text("点击了确定");
});
}
function click2() {
hiDialog.init("系统对话框~~", "什么乱七八糟的啊...", function () {
$(".messg").text("点击了确定~~~");
}, function () {
$(".messg").text("点击了取消~~");
});
}
</script>
</body>
</html>
消息框
要求：自动定时关闭消息框、有消息分类（如：警告、错误、成功等）
画一个简单的模型框
<div class="hi-message-box">
<img class="hi-message-type" src="" />
<span class="hi-message-messg">你不爱我了~~</span>
</div>
添上基本样式
<style type="text/css">
div.hi-message-box {
padding: 10px;
padding-top: 15px;
padding-bottom: 20px;
background-color: #aee0c1;
min-width: 200px;
max-width: 500px;
font-size: 19px;
border-radius: 3px;
}
</style>
效果图：
看上去是不是很简单呢？下面我们给它加上定时关闭消息功能。
定时关闭消息（表骂我，就是这么简单。我也想写复杂的。）
代码如下:
setTimeout(function () { $("div.hi-message-box").fadeOut("slow");}, 1200);
效果图：
加上消息类型（其实就是根据参数加不同的图片而已）
setTimeout(function () {
$("div.hi-message-box").fadeOut("slow");
}, 1200);
效果图：
加上图标是不是更像那么回事了？
如上，我们同样需要稍微整理下实现代码：
效果图：
全部代码：（同样，消息框也只是进行了简单实现。还有太多没有考虑，如（参数定位消息框位置、设置定时关闭时间、多次触发消息框））
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
box-sizing: border-box;
}
.clearfix:after {
content: ' ';
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
div.hi-message-box {
padding: 10px;
padding-top: 15px;
padding-bottom: 20px;
background-color: #aee0c1;
position: absolute;
min-width: 200px;
max-width: 500px;
font-size: 19px;
border-radius: 3px;
top:200px;
left:45%;
}
div.hi-message-box img {
vertical-align: bottom;
}
</style>
</head>
<body>
<input type="button" onclick="success();" value="成功消息" />
<input type="button" onclick="error();" value="失败消息" />
<input type="button" onclick="warn();" value="警告消息" />
<script src="../../Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
var hiMessageBox = {
init: function (type, messg) {
var hiMessageBox = '<div class="hi-message-box">\
<img class="hi-message-type" src="" />\
<span class="hi-message-messg"></span>\
</div>';
if (!$("div.hi-message-box").length) {
$("body").append(hiMessageBox);
}
var $box = $("div.hi-message-box");
$box.find(".hi-message-messg").text(messg);
switch (type) {
case 0://success 成功
$box.find("img.hi-message-type").attr("src", "imgs/Tick_24px.png")
break;
case 1://warn 警告
$box.find("img.hi-message-type").attr("src", "imgs/Warning_24px.png")
break;
case 2://
$box.find("img.hi-message-type").attr("src", "imgs/Delete_24px.png")
break;
}
$("div.hi-message-box").fadeIn("slow")
setTimeout(function () {
$("div.hi-message-box").fadeOut("slow");
}, 1200);
},
success: function (messg) {
this.init(0, messg);
},
warn: function (messg) {
this.init(1, messg);
},
error: function (messg) {
this.init(2, messg);
}
};
</script>
<script type="text/javascript">
function success() {
hiMessageBox.success("成功");
}
function error() {
hiMessageBox.error("失败");
}
function warn() {
hiMessageBox.warn("警告");
}
</script>
</body>
</html>
以上所述是基于基于.Net实现前端对话框和消息框的全部叙述，希望对大家有所帮助，如果大家想了解更多内容，敬请关注我们！
相关推荐
-
一个可携带附加消息的增强消息框MessageBoxEx
分享一个可携带附加消息的增强消息框MessageBoxEx --------------201507160917更新--------------- 无意中发现标准消息框在Windows7是有声音的,只是在Windows server 2008(R2)无声,而我用的刚好是后者,所以误以为是MessageBeep API在所有NT6系统都不工作造成~汗,有人在stackoverflow也提过这问题.但我仍然决定使用PlaySound API,不做修改 将声音处理交给ProcessIcon方法负责.之
-
.net 弹出消息框后导致页面样式变乱解决方法
点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 复制代码 代码如下: Response.Write("<script language=javascript>"); Response.Write("window.alert('"); Response.Write("计划添加失败!"); Res
-
ASP.NET中弹出消息框的几种常见方法
本文实例讲述了ASP.NET中弹出消息框的几种常见方法.分享给大家供大家参考.具体分析如下: 在ASP.NET网站开发中,经常需要使用到alert消息框,尤其是在提交网页的时候,往往需要在服务器端对数据进行检验,并给出提示或警告. 这里,仅介绍几种不同的实现方法. 1.众所周知的方法是采用如下代码来实现: 复制代码 代码如下: Response.Write("<script>alert('弹出的消息')</script>"); 不可否认,这种方法是最常用,也是最
-
C#实现客户端弹出消息框封装类实例
本文实例讲述了C#实现客户端弹出消息框封装类.分享给大家供大家参考.具体如下: asp.net在服务器端运行,是不能在服务器端弹出对话框的,但是C#可以通过在页面输出JS代码实现弹出消息框的效果,这个C#类封装了常用的消息框弹出JS代码,可以在服务器端调用,在客户端显示对话框.不但可以显示JS的警告框,还可以显示模式窗口,非常方便. using System; using System.Web; using System.Web.UI; using System.Web.UI.WebContro
-
基于.Net实现前端对话框和消息框
关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局等等一些本可以使用插件的.好了,废话不多时.我们来实现自己的对话框和消息框. 对话框 要求:可拖动.点击按钮后可回调 画一个简单的模型框 <div class="hi-dialog-box clearfix"> <div class="hi-dialog-title">系统提示<
-
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点. 1.Bootstrap对话框的使用 常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,B
-
基于jQuery的message插件实现右下角弹出消息框
1.$.messager.lays(width, height); 该方法主要用来定义弹出窗口的宽度和高度. 2.$.messager.anim(type,speed); 该方法主要定义窗口以什么样的方式和速度呈现. $.messager.anim("fade",1000); //以fadeIn的动画方式显示 $.messager.anim("show",1000); //以show的动画方式显示 3.$.messager.show(title,text,time)
-
深入理解Qt中各种消息框对话框的使用
最近在学习Qt框架,今天学习了一下消息框的使用, 现整理出来以作记录. 在程序运行时,经常需要提示用户一些信息,比如警告啊,提示啊,建议啊之类的东西.这些东西基本上是通过消息框与用户进行交互的,Qt中主要是用QMessageBox类来加以实现的. 消息框一般分为七种: Question询问消息框:为正常的操作提供一个简单的询问 Information信息消息框:为正常操作提供一个提示 Warning提示消息框:提醒用户发生了一个错误 Critical警告消息框:警告用户发生了一个严重错误 Abo
-
WPF自动隐藏的消息框的实例代码
(鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框. 介绍:传统的确定,取消,OK,CANCAL之类的对话框太繁琐了,由于项目需要而诞生的仿手机式提示对话框.当然传统的对话框项目中也有,这里就不做介绍了. 出场和退场动画做得很简单,就用Blend随便鼓捣了一番,将就用吧. 预览效果如下: 思路其实很简单:将窗体透明化->布局和样式设计->后台传值调用. 准备工作:Microsoft.Expression.Interactions.dll和System.Windows.
-
Java生成10个1000以内的随机数并用消息框显示数组内容然后求和输出
本文最终结果大概是这样的,使用java技术随机生成10个数,然后填充一个数组并在消息框中显示数组内容,接着对数组求和输出,将结果显示在消息框中. 设计思路:可以先用Math.Random()*1000生成1000以内随机数,然后依次存入数组中,然后读取数组,输出随机数,同时进行加法计算,最后将所有结果以消息框形式输出. 程序流程图: 源代码: package 随机数求和; import javax.swing.*; public class Sum { public static void ma
-
PyQt5每天必学之弹出消息框
默认情况下,如果我们点击标题栏上的 X 按钮,QWidget 关闭.有时候,我们需要改变这个默认行为.例如,如果我们有一个文件,要在编辑器中打开,我们可以先显示一个消息框,确认打开与否的操作. #!/usr/bin/python3 # -*- coding: utf-8 -*- """ PyQt5 教程 当我们点击应用程序窗口的关闭按钮,该程序显示一个确认信息框. 作者:我的世界你曾经来过 博客:http://blog.csdn.net/weiaitaowang 最后编辑:2