方式一：使用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. 通过js根据后台数据动态生成一个页面

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExportSelField ...

  2. 将Cent0S 7的网卡名称eno16777736改为eth0

    新建的虚拟机redhat linux7默认的网卡名称是eno16777736,找不到eth0如图所示: 修改网卡名称: 输入如下命令,进入对应目录,编辑文件: vim /etc/sysconfig/g ...

  3. kettle Java Filter(表达式过滤)

  4. java String的equals，intern方法（转载）

    JAVA中的equals和==的区别 ==比较的是2个对象的地址,而equals比较的是2个对象的内容. 显然,当equals为true时,==不一定为true: 基础知识的重要性,希望引起大家的重视 ...

  5. oracle里面的时间转字符串to_char()，字符串转时间to_date()，以及substr和instr的使用。

    工作中编写过的一条语句 select * from Bt_Holiday where to_char(Setting_DATE,'YYYY')=Substr('2015-03-00',1,4) AND ...

  6. jquery之each

    $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可 ...

  7. Android笔记之adb命令应用实例1(手机端与PC端socket通讯下)

    通过adb和Android通讯需要引用adb相关的组件到项目中,分别为:adb.exe,AdbWinApi.dll,AdbWinUsbApi.dll. 可以在XXX\sdk\platform-tool ...

  8. java新手笔记25 日期格式化

    1.系统时间 package com.yfs.javase; import java.sql.Time; import java.sql.Timestamp; import java.util.Cal ...

  9. window的画图工具(mspaint)也可以帮助我们开发和调试代码的.

    经常在视频中看到老师使用画图板来给学生讲解概念. 久而久之,发现私下里,开发程序调试程序时也可以使用画图板来辅助开发. 新建一个"无标题"的画图板 -> 把将要区分的问题扔进 ...

  10. linux下面的查找

    locate:     速度快     不是实时的,每天定时执行把结果导入数据库     模糊匹配     updatedb  --手动生成文件数据库,执行时间较长   find:     实时查找 ...