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. Flutter-icon

    常用屬性 Icon( Icons.access_alarm,//设置使用哪种图标 size: 300,//设置图标大小 color: Colors.yellow,//设置图标颜色 textDirect ...

  2. ubuntu 安装phpunit

    一.下载安装 wget https://phar.phpunit.de/phpunit-7.2.phar chmod +x phpunit-7.2.phar sudo mv phpunit-7.2.p ...

  3. Halo（八）

    安全模块 用户描述类 /** * 基本 Entity */ @Data @MappedSuperclass public class BaseEntity { /** Create time */ @ ...

  4. 深度学习中的batch、epoch、iteration的含义

    深度学习的优化算法,说白了就是梯度下降.每次的参数更新有两种方式. 第一种,遍历全部数据集算一次损失函数,然后算函数对各个参数的梯度,更新梯度.这种方法每更新一次参数都要把数据集里的所有样本都看一遍, ...

  5. 接触python的第2天:了解变量和打印

    1变量不用定义类型, 可以直接赋值 >>> a =5 >>> a 5 >>> a='hello' >>> a 'hello' 2 ...

  6. PHP curl_multi_exec函数

    curl_multi_exec — 运行当前 cURL 句柄的子连接 说明 int curl_multi_exec ( resource $mh , int &$still_running ) ...

  7. 10.27 sort

    排序命令sort选项与参数:-f :忽略大小写的差异,例如 A 与 a 视为编码相同:-b :忽略最前面的空白字符部分:-M :以月份的名字来排序,例如 JAN, DEC 等等的排序方法:-n :使用 ...

  8. C++ string.replace的使用

    //下面是一个检查一个字符串中是否有'.'的函数,该函数将找到的'.'转化为'_'. inline void checkName(string& name) { std::; while (s ...

  9. 改MYSQL数据库时遇的错

    //http://www.dongcoder.com/detail-1103326.html

  10. 如何消去delphi Stringgrid重绘时产生重影

    procedure TForm1.Stringgrid1DrawCell(Sender: TObject; ACol, ARow: Integer; Rect: TRect; State: TGrid ...