方式一：使用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. Java与Android开发环境配置以及遇到的问题解决

    0 概述 所有文章涉及的下载地址在文章下方会有汇总,所有软件的版本最好与系统版本一致 建议安装安卓开发软件至一个目录中,以方便查找 1 Java环境配置 1.1 JDK下载: 据说JDK6用的比较多, ...

  2. selenium文件上传的实现

    一.对于上传文件, 从手动操作我们可以看出, 需要对window 窗体进行操作, 而对于selenium webdriver 在这方面应用就受到了限制. 但是, 庆幸的是, 对于含有input ele ...

  3. eclipse导入包的快捷键

    在Eclipse里,写一个没有导入相应包的类名(这个类名已经完全写全,比如LayoutManager), 可以用ctrl+shift+M/Ctrl+Shift+o/Ctrl+1导入相应的包. 其中Ct ...

  4. 访问图像中的像素［OpenCV 笔记16］

    再更一发好久没更过的OpenCV,不过其实写到这个部分对计算机视觉算法有所了解的应该可以做到用什么查什么了,所以后面可能会更的慢一点吧,既然开了新坑,还是机器学习更有研究价值吧... 图像在内存中的存 ...

  5. [算法] get_lucky_price price

    int get_lucky_price(int price, const vector & number) 题意大概是给你一个数price,比如1000,然后有unlucky_num,有{1, ...

  6. Makefile当中宏定义传递字符串

    前几天遇到类似的问题[http://bbs.chinaunix.net/thread-1589386-1-1.html]: 在Makefile里面定义一个字符串在程序里面使用, CFLAGS += - ...

  7. How to: Extract files from a compiled setup.exe created by Inno setup

    Use innounp.exe to unpack setup.exe created by using Inno setup: for example, unpack all the files w ...

  8. Android_时间服务

    接着上一节,这次我查看了Android的时间服务,觉得帮助很大,解决了我很多疑问,下面我就自己总结了一下,加深了自己的印象,好记性不如烂笔头,还真讲得很不错,收下吧?看下图如何利用线程更新UI组件 重 ...

  9. jQuery队列控制方法详解queue()/dequeue()/clearQueue()

    queue(name,[callback]):  当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);$('#demo').queue('name') 当有两 ...

  10. linux定时执行php脚本

    1.查看lynx命令所在的路径 whereis lynx 或者 which lynx 如果没有,则安装 yum install lynx 或者 apt-get方式(ubuntu) 2.建立 shell ...