方式一：使用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. 阻止子View获取焦点方法

    android:descendantFocusability:ViewGroup ep: android:descendantFocusability=blocksDescendants

  2. ASP.NET Web Forms 4.5的新特性

    作者:Parry出处:http://www.cnblogs.com/parry/ 一.强类型数据控件 在出现强类型数据控件前,我们绑定数据控件时,前台一般使用Eval或者DataBinder.Eval ...

  3. ASP.NET在IIS7中如何更改网站的.net framework框架版本

    IIS7安装好以后使用了.net 2.0 framework框架,经过折腾发现如下方法可以更改框架版本,从而可以部署使用其他版本框架开发的网站 方法一:建立网站时设置.net框架版本 方法二:对于已经 ...

  4. ios - cordova(phoneGap)

    安装教程 下载 node.js. http://nodejs.org/ 下载后,直接安装就可以了. 安装 Cordova工具, $ sudo npm install -g cordova 创建APP: ...

  5. Spring框架中的单例Beans是线程安全的么？

    Spring框架并没有对单例bean进行任何多线程的封装处理.关于单例bean的线程安全和并发问题需要开发者自行去搞定.但实际上,大部分的Spring bean并没有可变的状态(比如Serview类和 ...

  6. activemq spring 配置

    Apache ActiveMQ是最流行和最强大的开源消息集成模式服务器.Apache ActiveMQ是速度快,支持多跨语言的客户端和协议,带有易于使用企业集成模式和许多先进的功能在充分支持JMS 1 ...

  7. 函数strtok

    char* strtok(char *str, const char*delim) char *strtok_r(char *str, const char *delim, char **savept ...

  8. phpstudy 下开启openssl

    1.在php.ini里面的extension=php_openssl.dll是开启的状态,没有被注释. 2.里面的allow_url_fopen = On表示开启了. 3.如果你是Windows 64 ...

  9. 在LaTeX中利用preview宏包和tikz宏包生成单图pdf

    有时候我们利用tikz宏包画出的图片后,只想生成一个单图pdf,而且pdf的页面大小与图片相同,以便于以后再次用latex插入. 可以与preview宏包进行搭配,页面大小由图像大小决定,可以通过改变 ...

  10. BrowserSync：跨浏览器实时同步预览

    BrowserSync:跨浏览器实时同步预览 2016.09.11 官方网站:https://www.browsersync.io/ 项目仓库:https://github.com/Browsersy ...