simplemodal — jquery弹出窗体插件

方式一：使用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:3200; 
    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

posted @ 2013-12-23 10:19  matthew2015  阅读(437)  评论(0)  编辑  收藏  举报