百度云盘　　传送门　　密码:afdo

3D对话框窗口插件效果：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery点击按钮弹出3D对话框窗口插件</title>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">

<link rel="stylesheet" type="text/css" href="css/popup.css" />

</head>

<body>

    <div class="container center-block">

        <h1>Popup 3D jQuery</h1>

        <a id="tst" rel="popup_name" class="btn btn-success btn-lg" href="#" role="button">3D对话框</a>

        <div class="popup">

            <div id="popup_name" class="popup_block">

                <div class="popup_head">

                    <h2>Popup 3D</h2>

                </div>

                <div class="popup_body">

                    <p>Gary.</p>

                </div>

            </div>

        </div>

    </div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="js/popup.js"></script>

<script src="js/script.js"></script>

</body>

</html>

index.html

.popup{

    position: absolute;

    top:50%;

    left:50%;

}

.popup_block{

    display: none;

    position: absolute;

    width:300px;

    margin:-150px;

    box-sizing: border-box;

    border-radius: 20px;

    border-style:solid;

    border-color:coral;

    cursor: pointer;

    transform-style: preserve-3d;

    box-shadow: 0px 20px 100px #aaa;

}

.close{

    padding:10px;

}

.popup_head{

    background-color:coral;

    padding:10px;

    border-radius: 10px 10px 0 0;

    transition-duration:0.2s;

}

.popup_body{

    padding:20px;

}

.popup_head > h1, h2, h3, h4, h5{

    margin-top:0px;

    color:white;

}

.popup_head:hover{

    padding-left:20px;

}

popup.css

实现过程

popup.js：jQuery和CSS3制作并可以使用鼠标进行互动的3D弹出窗口插件

CSS

设置弹出窗口模式快

.popup_block{

    display: none;

    position: absolute;

    width:300px;

    margin:-150px;

    box-sizing: border-box;

    border-radius: 20px;

    border-style:solid;

    border-color:coral;

    cursor: pointer;

    transform-style: preserve-3d;

    box-shadow: 0px 20px 100px #aaa;

}

box-sizing：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

border-radius：向 div 元素添加圆角边框

border-style：设置 4 个边框的样式　　传送门

1个参数

border-style:dotted;

所有 4 个边框都是点状

2个参数

border-style:dotted solid;

上边框和下边框是点状

右边框和左边框是实线

3个参数

border-style:dotted solid double;

上边框是点状

右边框和左边框是实线

下边框是双线

4个参数

border-style:dotted solid double dashed;

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

border-style：参数

cursor ：规定要显示的光标的类型（形状）

　　pointer 光标呈现为指示链接的指针　　其他参数：传送门

transform-style：被转换的子元素保留其 3D 转换

　　flat 子元素将不保留其 3D 位置。

　　preserve-3d 子元素将保留其 3D 位置。

box-shadow:：设置一个或多个下拉阴影的框

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow    ：必需的。水平阴影的位置。允许负值

v-shadow    ：必需的。垂直阴影的位置。允许负值

blur    ：可选。模糊距离

spread    ：可选。阴影的大小

color    ：可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset    ：可选。从外层的阴影（开始时）改变阴影内侧阴影

box-shadow：参数

设置弹出框头部

.popup_head{

    background-color:coral;

    padding:10px;

    border-radius: 10px 10px 0 0;

    transition-duration:0.2s;

}

transition-duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）

DOM

加载popup.js，写入对话框标题和对话框内容

<div class="popup">

            <div id="popup_name" class="popup_block">

                <div class="popup_head">

                    <h2>Popup 3D</h2>

                </div>

                <div class="popup_body">

                    <p>Gary.</p>

                </div>

            </div>

        </div>

JS框架_(Popup.js)3D对话框窗口插件的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  3. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  4. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  5. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  6. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  7. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  8. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  9. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

随机推荐

  1. 面试题1-十进制数转化为十六进制数，不使用hex方法

    问题: 给定一个整数,写一个算法将它转换为16进制,对于负数,可以使用two’s complement方法 def tohex(num): """十进制数转十六进制数&q ...

  2. js数据结构-链表

    链表和数组 大家都用过js中的数组,数组其实是一种线性表的顺序存储结构,它的特点是用一组地址连续的存储单元依次存储数据元素.而它的缺点也正是其特点而造成,比如对数组做删除或者插入的时候,可能需要移动大 ...

  3. jquery的ajax方法使用application/json出现400错误码的解决方案

    400说明是客户端错误,将contentType默认的application/x-www-form-urlencoded改成application/json就出现错误,说明传输的数据不是JSON. 解 ...

  4. vim /etc/security/limits.conf中的hard和soft

    转自:https://blog.csdn.net/zxljsbk/article/details/89153690 "soft" 和 "hard" 的区别sof ...

  5. ajax异步刷新请求数据

    AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XM ...

  6. 转载： Ubuntu 在命令下，安装中文环境的方法。

    转载: https://blog.csdn.net/zhangchao19890805/article/details/52743380 安装英文版ubuntu,在打开含有中文字符文件时会乱码,有需要 ...

  7. charles 安装使用教程及弱网设置

    1.安装jdk环境 2.下载charles 3.打开直接使用 4.手机端安装相关证书 5.手机端网络设置代理 6.分析查看数据 点击sequane中的值查看app中的数据返回与请求值.   charl ...

  8. Spark 2.43读取.json文件入库到MySQL 8

    如果没有安装包,可以用我的这个 百度网盘链接点击进入 提取码: eku1 解压之后 准备开始配置环境变量 如果运行时候报错参考 (java.io.IOException: Could not loca ...

  9. 18、nginx优化

    一.性能优化概述 基询imm能优化,那么在性能优化这一章,我们将分为如下几个方面做介绍 1.首先我们需要了解性能优化要考虑哪些方面. 2.然后我们需要了解性能优化必须要用到的压力测试工具ab. 3.最 ...

  10. orm之peewee

    peewee是一款orm框架,为什么选择peewee,是因为它比较简单和Django比较类似,而且还有一个async-peewee,可以进行异步化. 如何定义model和生成表 ''' 我们要定义两张 ...