原创！！jquery简单tips和dialog
<!------------------html代码----------------------->
<!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"/>
<!--dialogCss-->
<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>
<!--本页面css-->
<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>
<!----------------------------------------------------------------------------------------------------分割线--------------------------------------------------------------------------------------------------------------->
<!------------------dialog.css----------------------->
@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;
}
<!----------------------------------------------------------------------------------------------------分割线--------------------------------------------------------------------------------------------------------------->
<!------------------dialog.js----------------------->
/*
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的文件,所以话了点时间 ...
随机推荐
- dedecms列表页有图调用缩略图无图留空的方法
默认情况下,织梦的文章列表页会调用出当前栏目下的文章列表,并且调用出每个文章的缩略图:如果文章本身就有图,会调用出一张小图,如果没有,则会显示默认的织梦图片.这种处理方式有时候比较影响美观,其实可以修 ...
- PostgreSql 分页limit
摘录自:http://jingyan.baidu.com/article/a17d528538119b8098c8f2ca.html 语法: select * from persons limit ...
- 第一个ServiceStack服务框架
第一个ServiceStack服务框架 最近刚接触ServiceStack,就尝试着写了第一个服务框架,难免出错,还望同道们多多指正. 关于ServiceStack相关的概念不在做详细的叙述,网上研究 ...
- JavaScript String（字符串对象）
String 对字符串的支持 String.charAt( n ) 返回字符串中的第n个字符 n 是下标 String.charCodeAt( ) 返回字符串中的第n个字符的代码 String.con ...
- 找不到javax.servlet.Filter类，
找不到javax.servlet.Filter类, 在构建的依赖包中缺少servlet.api
- python3 第二十二章 - 函数式编程之Decorator（装饰器）
前面我们说了,在python中,一切皆对象.函数也是一个对象,而且函数对象可以被赋值给变量,通过变量也能调用该函数.如: def sayHello(name): print(name + ' hell ...
- python_开发规范
对于python有哪些开发规范? 1. 每行代码不超过80字符 2. 不要在逗号, 分号, 冒号前加空格, 应该之后加空格 3. 列表, 索引,切片的左括号前不加空格 4. 比较运算前后 加一个空格 ...
- linkin大话设计模式--简单工厂
linkin大话设计模式--工厂方法 什么是工厂方法:将多个类对象交给工厂来生成的设计被称为简单工厂模式,个人认为主要是为了实现解耦,在代码重构的时候会很重要. 代码如下: public class ...
- java to kotlin (2) - lambda编程
前言 Kotlin Note 是我学习kotlin整理笔记向博客,文章中的例子参考了kotlin in action这本书籍,同时我也极力推荐这本书,拥有Java基础的人可以很快的就使用kotlin来 ...
- 【转】matlab针对不同格式文件的读写
本技术支持指南主要处理:ASCII, binary, and MAT files.要得到MATLAB中可用来读写各种文件格式的完全函数列表,可以键入以下命令: help iofun MATLAB中有两 ...