方式一：使用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. 【转】prototype扩展的JavaScript常用函数库

    Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> ...

  2. 0708_Java如何设置输入流

    1.Java如何设置输入流:?(以解决看下面实例代码) 2.Java如何设置全局变量:(以解决public static即可) 3.Java为什么在做那种机试题目的时候都要设置成静态的:(以解决,因为 ...

  3. cocos2d-x实战 C++卷 学习笔记--第5章 精灵

    前言: 精灵类是Sprite类.它的子类有PhysicsSprite 和 Skin. PhysicsSprite 是物理引擎精灵类,而Skin是皮肤精灵类,用于骨骼动画. 创建Sprite精灵对象 创 ...

  4. ios 获取字符串所需要占用的label的高度

    //    设置字体大小 UIFont *fnt=[UIFont systemFontOfSize:16]; NSDictionary *attribute = @{NSFontAttributeNa ...

  5. oc 基础知识

    一.枚举 结构体 typedef enum{ sexMan, sexWoman }Sex;   tydedef struct{    int year;    int month;    int da ...

  6. OpenJudge/Poj 2027 No Brainer

    1.链接地址: http://bailian.openjudge.cn/practice/2027 http://poj.org/problem?id=2027 2.题目: 总Time Limit: ...

  7. 安卓Fragment和Activity之间的数据通讯

    Fragment是Android3.0之后才推出来的.可以用来做底部菜单,现在很多APP都有用到这个底部菜单.当然TabHost也可以用来做底部菜单,但是Fragment来做,动画效果这些可以做得更炫 ...

  8. 添加数据时候获取自增的ID

    create database dbDemo go use dbDemo go create table tdstudent { id int primary key identity(1,1), n ...

  9. Django同步创建models table失败

    django1.8通过manage.py syncdb 执行同步创建models中创建的表格失败 由于syncdb命令在1.9版本中会被remove, 需要改用makemigrations命令进行代替 ...

  10. smarty模板的基础搭建

    1.下载smarty模板,官方即有 2.解压即可.你会得这样的目录 除了libs文件夹其余都可以删掉(不知道有啥用). 3.在当前目录下分别创建templates.templates_c.cache. ...