方式一：使用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('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // 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的方式

效果如下：

参考：http://www.36ria.com/1337

simplemodal — jquery弹出窗体插件的更多相关文章

  1. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  2. jQuery弹出层插件popbox

    都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...

  3. webui-popover 一个轻量级的jquery弹出层插件

    该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css  js  文件 <link rel="s ...

  4. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  5. 简洁的Jquery弹出窗插件

    做项目时,很多时候都需要弹窗提示.如果要求不是很严格的项目,直接使用alert就可以搞定.对于需要高度定制化的项目,而且要求比较高的时候,就需要设计符合整体风格的弹出层,这种有美工帮忙,也比较好搞定. ...

  6. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

  7. FancyBox——jQuery弹出窗口插件

    最近工作项目中有用到这款插件,就查找了一下相关资料和用法,下面是一些基本的简单用法,比较容易掌握,有需要的小伙伴可以参考.:) FancyBox是一款基于jquery开发的类Lightbox插件.支持 ...

  8. jQuery弹出层插件大全

    1.thickbox 目前用的比较多的,最新版本是thickbox3.1 下载地址:http://jquery.com/demo/thickbox/#examples 2.colorBox 官方网站: ...

  9. layer官方演示与讲解（jQuery弹出层插件）

    1. 使用layer遇到困难?Fly社区虔诚为您解惑 2. layer 2.0 发布,以独立形式呈现的最后一个版本 3. Fork layer on Github,爱她,就给她加个星啵 当前版本:2. ...

随机推荐

  1. vs2010打开vs2012的sln文件

    1.找到**.sln文件,然后选择用记事本打开. 2.最前面找到“Microsoft Visual Studio Solution File, Format Version 12.00  # Visu ...

  2. 20160503-spring入门2

    使用Spring需要的jar 到http://www.springsource.org/download下载spring,然后进行解压缩,在解压目录中找到下面jar文件,拷贝到类路径下 dist\sp ...

  3. ASP.NET 4.0 来了

    伴随着VS2010的公开测试,ASP.NET4.0也进入了我们的视线.ASP.NET4.0究竟给我们带来了什么,将在哪些方面提高我们的生产力? 在何时你需要使用ASP.NET4.0开发你的网站程序? ...

  4. 添加数据库的Maven依赖(SqlServer,Oracle)

    oracle: 1.在Oracle官网下载ojdbc的jar包 例:ojdbc7.jar,版本是12.1.0.2,存储地址/home/peng/下载 2.dos中进入存储地址执行如下命令行(注意各项对 ...

  5. Java多线程的安全问题

    /*多线程的安全问题1.为什么会出现安全问题?因为程序在运行时,会出现一个线程在判断条件满足后,具备了执行资格,但没有运行代码后一个线程也判断了条件,也具备了执行资格,后一个线程运行了代码,但这时候, ...

  6. 出力csv

    public static void ExportResultLog(System.Data.DataTable dt, string fileName, string path) { if (!Sy ...

  7. phpcms v9后台多表查询分页代码

    phpcms v9里面自带的listinfo分页函数蛮好用的,可惜啊.不支持多表查询并分页. 看了一下前台模板层支持get标签,支持多表查询,支持分页.刚好可以把这个功能搬到后台来使用. 我们现在对g ...

  8. 【JTA】JTA允许应用程序执行分布式事务处理

    JTA,即Java Transaction API,JTA允许应用程序执行分布式事务处理——在两个或多个网络计算机资源上访问并且更新数据.JDBC驱动程序的JTA支持极大地增强了数据访问能力. htt ...

  9. C# zip/unzip with DotNet framework 4.5

    add reference System.IO.Compression.FileSystem public class ZipHelper { public static string UnZip(s ...

  10. Cocos2dx坐标转换

    Cocos2dx坐标转换 这段时间加班有点猛,没有太多时间来写博客了,ok,继续完成任务: 前言 这里将会重点介绍四个函数: convertToNodeSpace convertToNodeSpace ...