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(二)用户和用户组管理

    root用户可以访问自己的家目录,访问配置文件,访问普通用户的家目录 普通用户只能访问自己的家目录和root用户开放的目录 普通用户之间无法访问对方的家目录 创建用户,用id查看用户信息,root的u ...

  2. Mac OS 网络设置教程 wifi设置与宽带设置详解

    虽然所有设备连接无线网络的步骤都相差无几,但是Mac与windows系统还是不相同的,那么,苹果Mac怎么连接无线网络呢?针对此问题,本文就为大家介绍Mac网络的设置教程,有兴趣的朋友们可以了解下.如 ...

  3. 使用UncaughtExceptionHandler重启线程

    先复习Java中的异常 java.lang.Throwable 顶层父类 |– Error错误:JVM内部的严重问题,如OOM,程序员无法在代码中无法处理. |–Exception异常:普通的问题.通 ...

  4. 4412 搭建tftp服务器

    搭建服务器 --安装xinetd,sudo apt-get install xinetd --安装tftp和tftpd,sudo apt-get install tftp tftpd --配置/etc ...

  5. [杂题]:group（状压DP+轮廓线）

    题目描述 $pure$在玩一个战略类游戏.现在有一个士兵方阵,每行有若干士兵,每个士兵属于某个兵种.行的顺序不可改变,且每一行中士兵的顺序也不可改变.但由于每一行都有$C$个位置($C$不小于任一行的 ...

  6. [CSP-S模拟测试]:Emotional Flutter（贪心）

    题目传送门(内部题51) 输入格式 第一行一个整数$t$表示数据组数.每组数据的第一行有三个整数$s,k,n$.第二行有$n$个整数$A_1,A_2,...,A_n$,依次表示黑白条的长度. 输出格式 ...

  7. 2018-2019-2 20175307实验三《敏捷开发与XP实践》实验报告

    实验三 敏捷开发与XP实践-1 1.仔细学习了http://www.cnblogs.com/rocedu/p/4795776.html,发布了一篇关于Google的Java编码的博客,具体内容就不在这 ...

  8. shallow update not allowed

    ! [remote rejected] master -> master (shallow update not allowed) https://stackoverflow.com/quest ...

  9. PHP的Session机制解析 2

    在鸟哥的博客看到对php session的过期时间的一篇文章,在此记录. 原文地址:http://www.laruence.com/2012/01/10/2469.html 以下是鸟哥博客原文: 今天 ...

  10. php如何获取服务器端的一些信息

    <?php echo "服务器端的IP地址是:<br />"; echo $_SERVER['SERVER_ADDR']; echo "服务器端的端口号 ...