html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>弹出框效果</title>

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

		<script type="text/javascript" src="js/test.js" ></script>

		<style>

body { font-size:12px; padding:100px; }

.box { float:left; padding:5px; background:#eee; position:absolute; top:20%; left:25%;

        border-radius: 20px;

}

.box1 { width:500px; border:1px solid #4c7ebd;display:none;  border-radius: 20px; }

.box1 h1 { height:30px; line-height:30px; color:#fff; font-size:14px; background:#87b0e1; padding-left:10px; }

.box1 span { float:right; padding-right:10px; cursor:pointer;}

.box1 span a { display:block; height:30px; width:30px; background:url(img/close.jpg) no-repeat; text-indent:-9999px;}

.box1 span a:hover { background:url(img/close_hover.jpg) no-repeat;}

.box1 p { padding:10px; height:300px; background:#fff; border:3px solid #eee;text-align:center; }

.one { display:block;background-color: azure;width:50px;color: black;}

		</style>

	</head>

	<body>

		<input type=" submit" class="one" value="弹出框">

		<div class="box">

			<div class="box1">

				<h1><span><a href="#">关闭</a></span>这是标题</h1>

				<p>这是内容</p>

			</div>

		</div>

	</body>

</html>

　　js

$(document).ready(function(){

	$('.one').click(function(){

		$('.box1').show();

		});

	$('span').click(function(){

		$('.box1').hide();

		});

	$('.box').easydrag();

	});

　　效果：

2017-09-23   22:10:02

jquery 弹出框效果的更多相关文章

  1. 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】

    1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...

  2. 代码录播：jQueryMobile 实现一个简单的弹出框效果

    今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com  

  3. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  4. Bootboxjs快速制作Bootstrap的弹出框效果

    Bootboxjs是一个简单的js库,简单快捷帮你制作一个Bootstrap的弹出框效果. 一.简介 bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快 ...

  5. 3种jQuery弹出大图效果

    本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head& ...

  6. 主流Jquery弹出框优缺点对比

    一:BoxXy 缺点:动态加载隐藏的内容层时,是复制操作,而不是引用原内容层,这样会出现两个一样的内容层,影响id,class的jquery操作 二:artdialog

  7. jquery 弹出框 showDialog.js具体用法

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABWwAAAImCAIAAABID1T7AAAgAElEQVR4nO3d329c52Hgff1HvPCNLw

  8. Android仿ios底部弹出框效果

    准备: public class ActionSheet { public interface OnActionSheetSelected { void onClick(int whichButton ...

  9. js弹出框，禁刷新

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. CF 49E Common ancestor

    传送门 模拟赛T1就自闭了( 才不会说我是去刚T2了来着 感觉非常暴力的一个题? 出题人良心开大数据范围 n=100 还是原来的n^4*26算法我也是自闭了 不过貌似跑不到n^4? 真·大力出奇迹 一 ...

  2. 单例设计模式（Singleton）的优化

    单例模式的优化 单例模式懒汉式写法,单例模式的优化有以下四个方面: 使用同步保证线程安全synchronized 使用volatile关键字:volatile关键字提醒编译器后面所定义的变量随时都有可 ...

  3. Redis Key过期事件

    解决方案1: 可以利用redis天然的key自动过期机制,下单时将订单id写入redis,过期时间30分钟,30分钟后检查订单状态,如果未支付,则进行处理但是key过期了redis有通知吗?答案是肯定 ...

  4. find命令查找目录

    find <path> -type d -name "dir_name" -type d是查找目录的参数,如果是查找其他的: -type b: Block specia ...

  5. Exception和Error区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11393728.html Exception和Error都是继承了Throwable类,在Java中只有 ...

  6. [HDU2294]Pendant

    题目:Pendant 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2294 分析: 1)f[i][j]表示长度为i,有j种珍珠的吊坠的数目. $f[i][ ...

  7. 重温HTML和CSS3

    重温Web前端基础 本篇幅中着重文字,只是记录一些自己的见解,巩固下自身基础 网页结构是什么? 结构层 html 导航,列表,段文字,图片,链接,表示层 css 颜色,大小,位置,行为层 JavaSc ...

  8. JS知识—面试准备（一）

    1.JS内置类型 分为基本数据类型和Object.基本数据类型有:null,undefined,string,boolean,number,symbol. console.log(typeof nul ...

  9. spring boot 修改banner

    在resources目录下新建一个banner.txt,里面添加要显示的内容,如: ////////////////////////////////////////////////////////// ...

  10. slideshare原本是一个专业的幻灯片存储与展示的网站

    slideshare就是其中一个.slideshare原本是一个专业的幻灯片存储与展示的网站,它支持扩展名为ppt.pps和odp三种格式的幻灯片,用户上传成功以后slideshare会提供给用户一个 ...