方式一：使用jquery-1.7.1.min.js（1.9.1的版本我试过了，不行） + jquery_modal.js的方式
文件：
testModel.css：
/* Overlay */ #simplemodal-overlay { background-color:#000; cursor:wait; } /* Container */ #simplemodal-container { height:400px; width:600px; background-color:#fff; border:3px solid #ccc; } #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:-18px; cursor:pointer; } #simplemodal-container #basicModalContent { padding:8px; }
testModel.html：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery_modal.js"></script> <script type="text/javascript" src="testModel.js"></script> <link href="testModel.css" rel="stylesheet" type="text/css"> </head> <body> <div id='basicModal'><h2>Basic Modal Dialog</h2> <input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a> </div> <div id="basicModalContent" style='display:none'> <h1>Basic Modal Dialog</h1> <p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p> <p>Examples:</p> <p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p> <p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p> <p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p> <p><a href='http://www.ericmmartin.com/projects/simplemodal'>More details</a></p> </div> </body> </html>
testModel.js：
$(document).ready(function () { $('#basicModal input.basic, #basicModal a.basic').click(function () { alert("111"); //preventDefault方法取消事件的默认动作 //e.preventDefault(); //$.modal("<div><h1>SimpleModal</h1></div>"); $('#basicModalContent').modal(); }); });
方式二：使用jquery.js或者jquery-1.7.1.min.js（jquery 1.9.1版本试过了，不行） + jquery.simplemodal.js的方式
效果如下：
