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. ST-Link v2 刷写 GNUK，年轻人的第一个 OpenPGP 智能卡！

    前言 看到了这篇文章 想搞 PGP 智能卡玩,但是 yubikey 死贵 还涉及到某些傻逼政治问题 于是就想找找有无开源实现什么的. 然后就看见了 smartcard 的制作教程,可惜能找到的便宜 j ...

  2. 解决 IAR中 Warning[Pa082] 的警告问题

    这个警告不属于严重问题 在 IAR (for STM8)的编译中,经常有如下的警告: Warning[Pa082]: undefined behavior: the order of volatile ...

  3. 浅谈仓储UI自动化之路

    1 分层测试 分层测试:就是不同的时间段,不同的团队或团队使用不同的测试用例对产品不同的关注点进行测试.一个系统/产品我们最先看到的是UI层,也就是外观或者说整体,这些是最上层,最上层依赖下面的服务层 ...

  4. 大白话说Python+Flask入门（一）

    写在前面 技术这东西就得用,不用就会忘,之前写博客感觉就是给自己记笔记用,还有大部分,估计睡在语雀里都落灰了,哈哈! 在Python领域,我觉得我还是算个小白吧,会写讲不明白,所以我决定想做一件事,先 ...

  5. 在路上---学习篇（一）Python 数据结构和算法 (2) -- 冒泡排序、选择排序、插入排序

    独白: 第一次接触算法排序, 充满了好奇并且渴望了解其中原理,今天先学习了三种排序的方法,分别是 冒泡排序.选择排序.插入排序.学完以后发现数学知识真的很重要,越牛逼的算法要求知识越多,越精.虽说刚接 ...

  6. Django学习（一） 之 环境搭建

    写在前面 最近比较迷AI绘图,那就上个图吧,我感觉还挺好看的. 可能会有人说,之前不一致分享的是flask吗,怎么突然改到django了? 这个问题问得好,开发环境遇到了一些小困难! 不过django ...

  7. xray+bp+echole+rad

    安装证书 burp安装证书 开启burp suite,如下图所示下载证书后输入cacert.der即可 浏览器中上传证书,设置-->隐私和安全-->管理证书,一直下一步. xray安装证书 ...

  8. liunx二进制包安装5.6MySQL数据库

    官网下载对应的二进制版本安装包 https://downloads.mysql.com/archives/community/ # 解压二进制压缩包 [root@localhost ~]# wget ...

  9. 基于.NET Core + Quartz.NET+ Vue + IView开箱即用的定时任务UI

    前言 定时任务调度应该是平时业务开发中比较常见的需求,比如说微信文章定时发布.定时更新某一个业务状态.定时删除一些冗余数据等等.今天给大家推荐一个基于.NET Core + Quartz.NET + ...

  10. ElasticSearch之cat trained model API

    命令样例如下: curl -X GET "https://localhost:9200/_cat/ml/trained_models?v=true&pretty" --ca ...