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;} CSS 复制 全屏
转：https://www.cnblogs.com/yxhblog/archive/2012/07/11/2586712.html
