原创！！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的文件,所以话了点时间 ...
随机推荐
- 记录linux tty的一次软锁排查
本过程参照了某大侠的https://github.com/w-simon/debug/blob/master/tty_lock_cause_sytemd_hung , 当第二次出现的时候,还是排查了一 ...
- ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用（三）—用户账户及cookie配置
修改用户账户及cookie配置 一.修改密码强度和用户邮箱验证规则: 打开Startup.cs,找到public void ConfigureServices(IServiceCollection s ...
- F5负载均衡虚拟服务器配置FTP端口访问不了
F5配置ip映射到地址池ftp服务,访问报错:FTP出现"数据 Socket 错误: 连接被拒""ftp 列表错误"解决办法 1条回答 FTP的vs类型需要选择 ...
- ECLIPS-S测井系统下的仪器挂接 [TCC模块]
1. 环境 HPUX版本:11.23 Complete Image ECLIPS版本:Rel 5.1i 2. 效果图 3. 用途 为以后在此系统中挂接新仪器打下坚实的基础. 4. 参考资料 ECLIP ...
- Log4j源码解析--Appender接口解析
本文转自上善若水的博客,原文出处:http://www.blogjava.net/DLevin/archive/2012/07/10/382676.html.感谢作者的无私的分享. Appender负 ...
- Linkin大话Java和internet概念
整理电脑,无意中翻到不知道哪里来的文章,觉得里面写的很好,仔细看过一遍后,整理了下贴了出来,其中的好多概念我觉得讲的很透彻. 既然Java不过另一种类型的程序设计语言,为什么还有这么多的人认为它是计算 ...
- Spring MVC （JDK8+Tomcat8）
1 Spring MVC概述 Spring MVC是Spring为表现层提供的基于MVC设计理念的优秀的web框架,是目前最主流的MVC框架之一. Spring3.0后全面超越Struts2,成为最优 ...
- NFS+sersync+Keepalived高可用方案
标签(linux): nfs+keepalived 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 这套解决方法案的优点是配置比较简单.容易上手,缺点是当主NFS ...
- ABP官方文档翻译 4.5 特征管理
特征管理 介绍 关于IFeatureValueStore 特征类型 Boolean特征 Value特征 定义特征 基本特征属性 其他特征属性 特征层级 检查特征 使用RequiresFeature特性 ...
- JMeter生成HTML性能报告
有时候我们写性能报告的时候需要一些性能分布图,JMeter是可以生成HTML性能报告的 一.准备工作 1:jmeter3.0版本之后开始支持动态生成测试报表 2:jdk版本1.7以上 3:需要jmx脚 ...