index.html

<!DOCTYPE html>

<html>

<head>

	<!-- Contact Form CSS files -->

	<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />

</head>

<body>

<div>

	<div id='basic-modal'>

		<a href='#' class='basic'>打开弹窗</a>

	</div>

	<!-- modal content -->

	<div id="basic-modal-content">

		这边是弹框中要显示的内容

	</div>

</div>

<!-- Load jQuery, SimpleModal and Basic JS files -->

<script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>

<script type='text/javascript' src='js/jquery.simplemodal.js'></script>

<script type='text/javascript' >

	jQuery(function ($) {

		// Load dialog on page load

		//$('#basic-modal-content').modal();

		// Load dialog on click

		$('#basic-modal .basic').click(function (e) {

			$('#basic-modal-content').modal();

			return false;

		});

	});

</script>

</body>

</html>

basic.css

/*

 * SimpleModal Basic Modal Dialog

 * http://www.ericmmartin.com/projects/simplemodal/

 * http://code.google.com/p/simplemodal/

 *

 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com

 *

 * Licensed under the MIT license:

 *   http://www.opensource.org/licenses/mit-license.php

 *

 * Revision: $Id: basic.css 257 2010-07-27 23:06:56Z emartin24 $

 */

#basic-modal-content {display:none;}

/* Overlay */

#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */

#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}

#simplemodal-container .simplemodal-data {padding:8px;}

#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}

#simplemodal-container a {color:#ddd;}

#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}

#simplemodal-container h3 {color:#84b8d9;}

全部Demo下载

转：https://www.cnblogs.com/yxhblog/archive/2012/07/11/2586712.html

JQuery 弹出模态窗口的更多相关文章

  1. JS弹出模态窗口下拉列表特效

    效果体验:http://hovertree.com/texiao/js/20/ 或者扫描二维码在手机体验: 点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenq ...

  2. JS 弹出模态窗口解决方案

    最近在项目中使用弹出模态窗口,功能要求: (1)模态窗口选择项目 (2)支持选择返回事件处理 在IE中有showModalDialog 方法,可以很好的解决该问题,但是在Chrome中和FF中就有问题 ...

  3. 2019-6-23-WPF-解决弹出模态窗口关闭后，主窗口不在最前

    title author date CreateTime categories WPF 解决弹出模态窗口关闭后,主窗口不在最前 lindexi 2019-06-23 11:48:38 +0800 20 ...

  4. WPF 解决弹出模态窗口关闭后，主窗口不在最前

    本文告诉大家如何解决这个问题,在 WPF 的软件,弹出一个模态窗口.使用另一个窗口在模态窗口前面.从任务栏打开模态窗口.关闭模态窗口.这时发现,主窗口会在刚才使用的另一个窗口下面 这是 Windows ...

  5. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  6. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. jQuery弹出窗口浏览图片

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...

  8. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  9. jQuery 弹出窗口的形式一直是具体案件的中心

    在网上查 多 不是不符合无效;因此,一些自己总结,解决这个问题   原则: 常见问题: 弹出层居中了,背景也是半透明的  可是发现一拉动滚动栏立即就露馅了发现背景仅仅设置了屏幕所在段,其它部分都是原来 ...

  10. 15款最好的 jQuery Modal（模态窗口）插件

    jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...

随机推荐

  1. 优雅设计之美：实现Vue应用程序的时尚布局

    前言 页面布局是减少代码重复和创建可维护且具有专业外观的应用程序的基本模式.如果使用的是Nuxt,则可以提供开箱即用的优雅解决方案.然而,令人遗憾的是,在Vue中,这些问题并未得到官方文档的解决. 经 ...

  2. 神经网络基础篇：Python 中的广播（Broadcasting in Python）

    Python 中的广播 这是一个不同食物(每100g)中不同营养成分的卡路里含量表格,表格为3行4列,列表示不同的食物种类,从左至右依次为苹果,牛肉,鸡蛋,土豆.行表示不同的营养成分,从上到下依次为碳 ...

  3. 2023-11-22：用go语言，给你一个长度为 n 下标从 0 开始的整数数组 nums。 它包含 1 到 n 的所有数字，请你返回上升四元组的数目。 如果一个四元组 (i, j, k, l) 满足

    2023-11-22:用go语言,给你一个长度为 n 下标从 0 开始的整数数组 nums. 它包含 1 到 n 的所有数字,请你返回上升四元组的数目. 如果一个四元组 (i, j, k, l) 满足 ...

  4. JAVAweek6

    本周学习 Java语言基础:运算符[有所区别] 算术运算符 +(3+2) - * / %(取余,模运算) +(连接符)(3+''2'') ++ -- class VarDemo { //算术运算符 p ...

  5. 🔥🔥Java开发者的Python快速实战指南：实用工具之PDF转DOCX文档（可视化界面）

    首先,大家对Python语法的了解已经基本完成,现在我们需要开始进行各种练习.我为大家准备了一些练习题目,比如之前的向量数据库等,这些题目可以参考第三方的SDK来进行操作,文档也是比较完善的.这个过程 ...

  6. pta三次实验的总结

    第一次pta作业 在pta第一次作业,因为是第一次作业所以大体是比较容易,但是也有几个要注意的点,就是两个double的值相加减相乘的值与实际值会有一定的误差,误差大小为0.0000001,所以在写p ...

  7. 1 HTTP是什么，HTTP不是什么？

    HTTP是什么? HTTP 全程超文本传输协议(HyperText Transfer Protocol). 包含三部分:超文本.传输.协议. 1. 协议 HTTP是一个用在计算机世界里的协议.它使用计 ...

  8. 华企盾DSC苹果电脑-认证用户提示“不是认证成功的账户”

    出现该问题说明客户端连不上服务器,一般来说是网络原因,可按照下面方法排查 ​ 1.先检查网络是否通能否正常上网或者换一个网络试试 2.查看服务器是否启动 3.客户测试连接是否成功端口是否填成了5580 ...

  9. 华企盾DSC造成svn、git连接不上常见处理方法

    1.检查svn服务器是否正在运行 2.检查个人模式连接不上服务器网络加密了客户端未加密(查看客户端日志进程是否为legal:1网络访问设置是否正常,试试只加密服务器IP及端口的方式),个人模式可以连接 ...

  10. NetSuite 开发日记：解决导入 CSV 与 Excel 文件时中文乱码问题

    Backgroud 在使用SheetJS库导入带有中文的CSV文件时,中文被解析为了乱码 Analysis 乱码肯定是编码问题 确定CSV的编码,可使用VS Code.记事本来查看 修改CSV文件编码 ...