原创！！jquery简单tips和dialog

<!DOCTYPE html>
<html>
<head>
<title>dialog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>

<link rel="stylesheet" href="dialog.css">
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="dialog.js"></script>

<style>
body{padding: 50px;}
input[type="button"]{padding: 3px 15px;}
</style>
</head>
<body>
<input type="button" value="提示" class="tips-btn">
<input type="button" value="对话" class="confirm-btn">
<script type="text/javascript">
$(function(){
　　$(".tips-btn").on("click",function(){
　　　　tanshDialog.tips({
　　　　content:"提示",//可以加入标签
　　　　time:2000,
　　　　skin:"css1 css2"
　　})
})
$(".confirm-btn").on("click",function(){
　　tanshDialog.confirm({
　　　　title:"标题",
　　　　content:"内容内容<br/>内容内容内容内容内容内容内容",
　　　　bg:true,
　　　　drag:true
　　})
})
})

</script>
</body>
</html>

@chrset "utf-8";

*{margin: 0;padding: 0;list-style: none;font-size: 14px;text-decoration: none;}
.dialog_bg{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
filter:alpha(opacity=50);
z-index: 1990;
left: 0;
top:0;
display: none;
}

/*tips-skin*/
.tsh-tips{
position: fixed;
z-index: 1993;
left: 50%;
top: 50%;
border: 1px solid #ccc;
border-radius: 15px;
background: #333;
padding: 5px 40px;
color: #fff;
}

/*confirm*/
.tsh-confirm{
position: absolute;
z-index: 1994;
background-color: #fff;
width:400px;
box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.35);
-webkit-box-shadow:0 3px 8px 0px rgba(0, 0, 0, 0.35);
display: none;
left: 50%;
top: 50%;
border: 1px solid #ccc;
cursor: normal;
}
.confirm-title{
height: 45px;
line-height: 45px;
padding-left: 15px;
color: #666;
background-color: #f5f7f6;
filter: none;
text-shadow: none;
}
.confirm-title a.delete{
position: absolute;
right: 15px;
font-size:20px;
height: 45px;
line-height:45px;
top: 0px;
font-family:arial;
color: #666;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform: rotate(0deg);
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition: all 0.5s ease;
}
.confirm-title a.delete:hover{
-webkit-transform: rotate(360deg);
-moz-transform:rotate(360deg);
transform: rotate(360deg);
}
.confirm-content{
padding: 20px;
text-align: center;
line-height: 25px;
}
.confirm-button{
padding-bottom: 26px;
text-align: center;
background: none;
}
.confirm-button button{
display: inline-block;
vertical-align: middle;
height: 32px;
margin: 0 6px;
padding: 0 20px;
color: #666;
text-align: center;
background-color: #fff;
border: 1px solid #d7d9d8;
outline: none;
border-radius: 4px;
cursor: pointer;
}
.confirm-button .btn-highLight{
color: #fff;
background-color: #ff8941;
border: 1px solid #ff8941;
}

/*
author:tanshuhua(shira);
date:2017/07/31
*/
var tanshDialog = {
tips:function(opt){
var tipsBox = {
content:"",
time:0,
skin:""//皮肤，即css样式名称,中间用空格隔开
};
var options = $.extend({},tipsBox,opt);
var timer;
var tipsContenter = $("<div class='tsh-tips "+options.skin+"'>"+ options.content +"</div>");
clearInterval(timer);
var l = tipsContenter.width()/2;
var t = tipsContenter.height()/2;
tipsContenter.css({
"margin-left":"-"+l+"px",
"margin-top":"-"+t+"px"
})
//判断页面中是否有tips;
if($(".tsh-tips").length>0){
return;
}else{
$("body").append(tipsContenter);
}
timer = setTimeout(function(){
tipsContenter.remove();
},options.time);
},
confirm:function(opt){
var confirmBox = {
title:"",
content:"",
skin:"",
bg:true,//透明黑色背景
drag:true,//拖拽
}
var options = $.extend({},confirmBox,opt);
var confirmContent = $("<div class='tsh-confirm "+options.skin+"'>"+
"<div class='confirm-title'><div class='text'>"+options.title+"</div><a class='delete' id='delete' href='javascript:void(0);'>x</a></div>"+
"<div class='confirm-content'>"+options.content+"</div>"+
"<div class='confirm-button'>"+
"<button id='cancel'>取消</button>"+
"<button id='sure' class='btn-highLight'>确定</button>"+
"</div>"+
"</div>");
var dialogBg = $("<div class='dialog_bg'></div>");
$("body").append(dialogBg);
dialogBg.before(confirmContent);
//居中
var l = confirmContent.width()/2;
var t = confirmContent.height()/2;
confirmContent.css({
"margin-left":"-"+l+"px",
"margin-top":"-"+t+"px"
})
confirmContent.show();
//黑色透明背景
if(options.bg === true){
dialogBg.fadeIn(300);
}else{
dialogBg.hide();
}
if(options.drag === true){
confirmContent.on("mousedown",function(e){
var DEFAULT_VERSION = 8;
var ua = navigator.userAgent.toLowerCase();
var isIE = ua.indexOf("msie")>-1;
var safariVersion;

if(isIE){
safariVersion = ua.match(/msie([\d.]+)/)[1];
var sa = parseInt(safariVersion);
if(safariVersion <= DEFAULT_VERSION){
//IE8以下
return;
}else{
//拖拽
//当前位置
var curX = 0;
var curY = 0;

//获取div的初始值
var left = parseInt(confirmContent.css("left"));
var top = parseInt(confirmContent.css("top"));

//获取鼠标的位置
var pointX = e.pageX;
var pointY = e.pageY;
//console.log(pointX+","+pointY);

confirmContent.on("mousemove",function(es){
curX = es.pageX - pointX + left;
curY = es.pageY - pointY + top;

confirmContent.css({
"left":curX + "px",
"top":curY + "px"
});
})
}
}
})
confirmContent.on("mouseup",function(){
confirmContent.unbind("mousemove");
})
}

$("#cancel,#delete").on("click",function(){
confirmContent.hide();
dialogBg.hide();
})
}
};

原创！！jquery简单tips和dialog的更多相关文章

jquery ui中的dialog，官网上经典的例子
jquery ui中的dialog,官网上经典的例子 jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这 ...
原创jquery插件treeTable（转）
由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...
jQuery UI 对话框（Dialog） - 模态表单
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
网友微笑分享原创Jquery实现瀑布流特效
首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...
jquery 简单弹出层(转)
预定义html代码:没有所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
JQuery简单实现锚点链接的平滑滚动
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现. 一般使用锚点来跳转到页面指定位置的时候,会生 ...
基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

随机推荐

Contiki 源代码目录结构
最近要在烧写contiki的CC2650上做一些简单的实验,需要对contiki的目录结构有一个简单的了解.本文使用的是contiki 3.0版本,并且参考了百度文库上的一篇文档:https://we ...
ASP.NET导出word实例
ASP.NET导出word实例最近遇到一个题目就是如何在asp.net中将数据导出到word中,由于数据是动态的,所以需要在后台拼出想要的的格式,翻遍了网页找出了一个比较满意的代码,感谢那位高手.代 ...
idea 远程调试 tomcat web应用
最近在做的一个东西,测试环境和本地环境差距太大,本地能运行的代码,放到测试环境上到处报错,哪里哪里都连不上,所以决定把代码部署到远程服务器上调试,节省时间. 网上看了很多教程,大部分都是互相抄来抄去, ...
懒人小技巧, Toad 常用偷懒方法
用toad很久了, 感叹它的功能强大的同时整理了一些相关技巧, 有以前在网上看到的也有自己平时用的时候偶尔发现的, 分享一下, 它对用户体验方面做的真的很到位, 通过各种方式来方便用户的操作. 菜鸟 ...
webpack的四大核心概念
webpack中文文档:https://doc.webpack-china.org/concepts/ 一.Entry(入口) 1.单个入口(简写)语法 // 语法 entry: string|Arr ...
Web前端学习（4）：显示图片、url与文件路径
本章主旨介绍<img>标签及其基本属性:介绍URL和文件路径在上一章中,我简单地介绍了HTML的一些基本标签及基本属性,例如,我们用<p>标签来标记文本段落,用<h1 ...
Linux指令--性能监控和优化命令相关指令
原文出处:http://www.cnblogs.com/peida/archive/2012/12/05/2803591.html.感谢作者无私分享性能监控和优化命令相关指令有:top,free,v ...
Linux指令--head,tail
原文出处:http://www.cnblogs.com/peida/archive/2012/11/06/2756278.html head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头 ...
渲染引擎(The rendering engine)
渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容.这是每一个浏览器的核心部分,所以渲染引擎也称为浏览器内核. 渲染引擎一开始会从网络层获取请求文档的内容. 获取文档后,渲染引擎开始解析 htm ...
图片文档倾斜矫正算法附完整c代码
2年前在学习图像算法的时候看到一个文档倾斜矫正的算法. 也就是说能将一些文档图像进行旋转矫正, 当然这个算法一般用于一些文档扫描软件做后处理或者用于ocr 文字识别做前处理. 相关的关键词: 抗倾斜 ...

原创！！jquery简单tips和dialog

原创！！jquery简单tips和dialog的更多相关文章

随机推荐

热门专题