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. webRTC脱坑笔记（三）— webRTC API之RTCPeerConnection

    RTCPeerConnection API是每个浏览器之间点对点连接的核心,RTCPeerConnection是WebRTC组件,用于处理对等体之间流数据的稳定和有效通信. RTCPeerConnec ...

  2. 人生苦短_我用Python_类与对象的概念_006

    Python类与对象的概念类和对象--->万事万物都对象物以类聚.人以群分 --->?划分标准性别分 男女 中性成绩分 优秀 良好 不及格 类->根据类的属性来划分类的实例-> ...

  3. java 根据excel模板导出文件

    <!--读取excel文件,配置POI框架的依赖--> <dependency> <groupId>org.apache.poi</groupId> & ...

  4. .NET Core 使用 mongodb

    1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...

  5. 4412 4路pwm输出

    一.4412 xpwmTOUT1 这是4412的GPD0_1路,itop中被使用为LCD的背光电路的pwm功能.因此如果使用教程中的代码,同样操作GPD0_1是行不通的. 会出现错误,所以需要解除在内 ...

  6. 【LeetCode 73】矩阵置零

    题目链接 [题解] 如果a[i][j]==0. 就把第i行的第一个数字置为0 然后把第j列的第一个数字置为0 最后再处理下每行第一个为0的行.每列第一个为0的列. (第一行和第一列都得用同一个位置处理 ...

  7. linux0.11内核源码——用户级线程及内核级线程

    参考资料:哈工大操作系统mooc 用户级线程 1.每个进程执行时会有一套自己的内存映射表,即我们所谓的资源,当执行多进程时切换要切换这套内存映射表,即所谓的资源切换 2.但是如果在这个进程中创建线程, ...

  8. LG1440 求 m 区间内的最小值

    题目描述 一个含有 \(n\) 项的数列 (\(n≤ 2000000\)),求出每一项前的 \(m\) 个数到它这个区间内的最小值.若前面的数不足 \(m\) 项则从第 \(1\) 个数开始,若前面没 ...

  9. python数据储存

    python数据储存 csv文件的操作 安装csv包打开cmd 执行 pip install csv引入的模块名为csv 读取文件 with open("xx.csv"," ...

  10. Design：设计（活动）百科

    ylbtech-Design:设计(活动)百科 设计是把一种设想通过合理的规划.周密的计划.通过各种感觉形式传达出来的过程.人类通过劳动改造世界,创造文明,创造物质财富和精神财富,而最基础.最主要的创 ...