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. Linux中检查内存使用情况的命令

    Linux操作系统包含大量工具,所有这些工具都可以帮助您管理系统.从简单的文件和目录工具到非常复杂的安全命令,在Linux上没有太多不能做的事情.而且,虽然普通桌面用户可能不需要在命令行熟悉这些工具, ...

  2. BZOJ3227 [sdoi2008]红黑树

    贪心什么的太神仙了( 老老实实dp于是就是沙茶题了 f[i][d][0/1]表示i个节点bh为d当前节点颜色白/黑[好好读题是真.. 转移一下然后就可以打表了( 由于我们发现这玩意很好卡有很好的性质( ...

  3. Oracle 行转列(pivot、wm_concat、decode)使用总结

    CREATE TABLE CC (Student NVARCHAR2(2),Course NVARCHAR2(2),Score INT ); INSERT into CC select N'张三',N ...

  4. python request（HttpRequest对象）请求的属性、方法笔记

    1.属性 path:表示提交请求页面完整地址的字符串,不包括域名,如"/music/bands/the_beatles/". method:表示提交请求使用的HTTP方法.(GET ...

  5. vue 全局 js 方法

    1.新增 getCurrentDataType.js 文件 import cookieUtils from '@/config/cookieUtils' function getCurrentData ...

  6. Halo（十一）

    Spring Boot 继承 AbstractErrorController 实现全局异常处理 @RequestMapping("${server.error.path:${error.pa ...

  7. C++ 穷举算法 鸡兔同笼

    #include "stdio.h" int qiongju(int head, int foot, int *chicken, int *rabbit) { int re, i, ...

  8. python字符串非空判断

    1. 字符串非空判断 2. list 非空判断

  9. 使用CSS在页面中嵌入字体

    http://jingyan.baidu.com/article/3065b3b6e9b2d9becff8a4c1.html 首先感谢css9.net照抄原话: 字体使用是网页设计中不可或缺的一部分. ...

  10. 【Java】java获取request body

    //方式一 public static String ReadAsChars(HttpServletRequest request) { BufferedReader br = null; Strin ...