原创！！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的文件,所以话了点时间 ...

随机推荐

destoon标签
http://blog.csdn.net/oYuHuaChen/article/details/54601509 ------------
Linux的运行级别详细说明
Linux 7个运行级别 # 0 - 停机(千万不要把initdefault设置为0 ) # 1 - 单用户模式 # 2 - 多用户,但是没有NFS # 3 - 完全多用 ...
SpringMvc4.x--Spring MVC的常用注解
//下列代码显示用到的对象public class DemoObj { private Long id; private String name; public DemoObj() { //① sup ...
mybatis配置多个数据源事务(Transaction)处理
当mybatis配置文件中只有一个数据源的时候,按照正常的事务注解形式@Transaction是没有问题的,但是当配置文件中有多个数据源的时候发现事务不起作用了,怎么解决这个问题呢?看下面的案例:
java面向对象的三大特性——多态
多态所谓多态就是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用在编程时并不确定,而是在程序运行期间才确定,即一个引用变量倒底会指向哪个类的实例对象,该引用变量发出的方法调用到底 ...
BSA Network Shell系列-nexec | runcmd | runscript | scriptutil的异同
说明下nexec.runcmd.runscript.scriptutil的异同相同点: 四者都可以在远程机器执行命令.或者调用脚本. 不同点: nexec支持NSH命令,可以执行远程机的本地命令(非 ...
05_Javascript进阶第二天
String对象 res=str.charAt(1);//返回字符串中第n个字符(输出:i) res=str.charCodeAt(1);//返回第n个字符的ASCII编码(输出:105) res=S ...
python --- queue模块使用
1. 什么是队列? 学过数据结构的人都知道,如果不知道队列,请Google(或百度). 2. 在python中什么是多生产者,多消费模型? 简单来说,就是一边生产(多个生产者),一边消费(多个消费者) ...
准备：新V8即将到来，Node.js的性能正在改变
V8的Turbofan的性能特点将如何对我们优化的方式产生影响审阅:来自V8团队的Franziska Hinkelmann和Benedikt Meurer. **更新:Node.js 8.3.0已经 ...
CentOS 7 yum 安装 MySQL5.7
1.下载 MySQL 官方的 Yum Repository ,官网地址:https://dev.mysql.com/downloads/repo/yum/ 从 MySQL 官网选取合适的 MySQL ...

原创！！jquery简单tips和dialog

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

随机推荐

热门专题