JQuery 弹出模态窗口

jquery,弹出,模态,窗口 · 浏览次数 : 205

小编点评

**HTML** ```html ``` **CSS** ```css #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; } ```

正文

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