一步步开发自己的博客 .NET版（10、前端对话框和消息框的实现）
关于前端对话框、消息框的优秀插件多不胜数。造轮子是为了更好的使用轮子，并不是说自己造的轮子肯定好。所以，这个博客系统基本上都是自己实现的，包括日志记录、响应式布局、评论功能等等一些本可以使用插件的。好了，废话不多时。我们来实现自己的对话框和消息框。
对话框
要求：可拖动、点击按钮后可回调
- 画一个简单的模型框
<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);
});
});
如果使用jquery.min.js，拖动一句代码搞定： $("div.hi-dialog-title").draggable();
以上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);
var $box = $("div.hi-message-box");
$box.find("img.hi-message-type").attr("src", "imgs/Warning_24px.png")
效果图：
加上图标是不是更像那么回事了？
如上，我们同样需要稍微整理下实现代码：
效果图：
全部代码：（同样，消息框也只是进行了简单实现。还有太多没有考虑，如（参数定位消息框位置、设置定时关闭时间、多次触发消息框））
<!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>
关于简单实现自己的对话框和消息框就到这里了。感谢您的阅读，希望对您有一点点作用。
文章首链：http://www.cnblogs.com/zhaopei/p/MessageBox_DialogBox.html
一步步开发自己的博客 .NET版（10、前端对话框和消息框的实现）的更多相关文章
- 一步步开发自己的博客 .NET版（1、基本显示）
前言 我们每个猿都有一个搭建自己独立博客的梦,我也不例外.以前想 现在想 以后也想.之所以一直迟迟没有着手,是因为难以跨出第一步.每次心里想着,等我以后技术好了再说,然后就没有然后了.以前用过word ...
- 一步步开发自己的博客 .NET版（3、注册登录功能）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 一步步开发自己的博客 .NET版（4、文章发布功能）百度编辑器
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做个插件,任何网站上的技术 ...
- 一步步开发自己的博客 .NET版（5、Lucenne.Net 和 必应站内搜索）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 一步步开发自己的博客 .NET版（11、Web.config文件的读取和修改）
Web.config的读取 对于Web.config的读取大家都很属性了.平时我们用得比较多的就是appSettings节点下配置.如: 我们对应的代码是: = ConfigurationManage ...
- 一步步开发自己的博客 .NET版（9、从model first替换成code first 问题记录）
为什么要改用code first 用过code first的基本上都不会再想用回model first或是db first(谁用谁知道).不要问我为什么不一开始就直接使用code first,因为那个 ...
- ASP.NET 一步步开发自己的博客 .NET版（11、Web.config文件的读取和修改）
原文:http://www.cnblogs.com/zhaopei/p/5677053.html
- 一步步搭建自己的博客 .NET版（2、评论功能）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
随机推荐
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 前端学HTTP之web攻击技术
前面的话 简单的HTTP协议本身并不存在安全性问题,因此协议本身几乎不会成为攻击的对象.应用HTTP协议的服务器和客户端,以及运行在服务器上的Web应用等资源才是攻击目标.本文将详细介绍攻击web站点 ...
- [C#] 了解过入口函数 Main() 吗？带你用批处理玩转 Main 函数
了解过入口函数 Main() 吗?带你用批处理玩转 Main 函数 目录 简介 特点 方法的参数 方法的返回值 与批处理交互的一个示例 简介 我们知道,新建一个控制台应用程序的时候,IDE 会同时创建 ...
- SELECT INTO 和 INSERT INTO SELECT 两种表复制语句
Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) values(value1,value2,...)这种形式的在应用程序开发中必不可少.但我 ...
- H5坦克大战之【玩家控制坦克移动2】
周一没有看圣诞大战,这几天比较忙也没有看赛后的报道,今天就先不扯NBA,随便扯扯自己.昨天在电脑里找东西的时候翻到以前兼职健身教练时的照片,思绪一下子回到学生时代,脑子久久换不过来.现在深深觉得健身和 ...
- Discuz论坛黑链清理教程
本人亲测有效,原创文章哦~~~ 论坛黑链非常的麻烦,如果你的论坛有黑链,那么对不起,百度收录了你的黑链,不会自动删除,需要你手动去清理. 什么是黑链 黑链,顾名思义,就是一些赌博网站的外链,这些黑链相 ...
- jira的插件开发流程实践
怎么开头呢,由于自己比较懒,博客一直不怎么弄,以后克己一点,多传点自己遇到的问题和经历上来,供自己以后记忆,也供需要的小伙伴少走点弯路吧 最近公司项目需要竞标一个运维项目,甲方给予了既定的几种比较常用 ...
- 如何通过Git GUI将自己本地的项目上传至Github
最近在学习node.js和react,顺便复习了下AngluarJS相关的东西,写了些小demo想放在GitHub上,之前仅限于只申请了GitHub账号从没用过,今天花半天时间查资料认真学习Githu ...
- bzoj1531: [POI2005]Bank notes
Description Byteotian Bit Bank (BBB) 拥有一套先进的货币系统,这个系统一共有n种面值的硬币,面值分别为b1, b2,..., bn. 但是每种硬币有数量限制,现在我 ...
- mono中发送邮件并保存本次收件人的地址
在ios端mono开发中,发送邮件可以选择调用ios原生email程序.有两种方式实现这种功能,一是程序跳转到ipad中email程序,另外一种是将发送邮件的界面在自己应用里弹出. 首先第一种方式的代 ...