方式一：使用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:;
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的方式
效果如下：