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

随机推荐

eclipse中如何同期化
打开MyEclipse8.0help->Software Updates->find and install(如果没有这个就用help->Software Updates->A ...
Python+Selenium安装及环境配置
一.Python安装 Window系统下,python的安装很简单.访问python.org/download,下载最新版本,安装过程与其他windows软件类似.记得下载后设置path环境变量,然后 ...
C#如何释放已经加载的图片
使用Image.FromFile取磁盘上的图片时,这个方法会锁定图片文件,而且会导致内存占用增大, 有几种方法解决:一:将Image类转换成Bitmap类System.Drawing.Image im ...
designed principle
Review Of designed Pattern principle OutLine: Explanation in principles of designed pattern and usef ...
js == 和 ===
1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值"是否相等,===如果类型不同 ...
bash中声明变量方法
bash提供了declare命令来声明变量,该命令的基本语法如下: declare attribute variable 其中,attribute表示变量的属性,常用的属性有如下所述. ...
python_如何让类支持比较运算？
案例: 有时我们希望自定义的类,实例间可以使用比较运算符进行比较,我们自定义比较的行为. 需求: 有一个矩形的类,我们希望比较两个矩形的实例时,比较的是他们的面积如何解决这个问题? 在类中重新定义比 ...
linkin大话设计模式--单例模式
linkin大话设计模式开文前先弱弱的问一句:什么是设计模式?我在研究java2ee的时候有研究过,在学js的时候也有看到.设计模式的概念最早源于建筑设计大师<建筑的永恒算法>一书,它表 ...
windows下使用Git Bash命令行克隆远程仓库代码
此处使用的代码托管平台是GitLab,相比GitHub来说,它可以设置免费的私有仓库,哈哈,妈妈再也不用担心我的源码泄露了!1.切换到本地的工作目录,我的目录是: cd /d/coder/websit ...
计算器（Ext）
<html> <head> <title>计算器</title> <meta charset="UTF-8"> < ...

原创！！jquery简单tips和dialog

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

随机推荐

热门专题