【原创】Jquery实现模态窗口—simplemodal

2012-07-11 17:50 杨新华阅读(6836) 评论(2) 编辑收藏举报

上一遍讲了使用showModalDialog来实现模态窗口，今天我就说一下jquery是如何实现这样的功能的。QQ邮箱里面的邮件删除，弹出确认对话框是不是很好看，是的，它看起来实现很复杂，其实不然，现在Jquery插件已经很方便的让你来实现这些功能，那就是我们的simplemodal插件。网上可以下载相应的插件，也可以直接上官网去下载相应插件与实例，我今天的内容也全部来自于官网，在本节的最后会有全部的Demo下载。

本节内容：

(1)simplemodal的定义及说明

(2)simplemodal的基本使用

(3)simplemodal实现弹出一个是/否的确认对话框(类似于QQ邮箱删除提示)

(4)simplemodal实现弹出一个ASPX页面(官网上是弹出一个php页面)

(5)simplemodal的其它使用

一：simplemodal的定义及说明

定义：

SimpleModal是一个轻量级的jQuery插件，它提供了一个强大的界面模态对话框发展。认为它作为一个模式对话框框架。 SimpleModal给你建立任何你可以想象的，同时屏蔽从相关的跨浏览器的UI开发所固有的问题，提高你开发的灵活性。

使用：

SimpleModal提供2个简单的方法来调用一个模式对话框。

（1）作为一个串连的jQuery函数，你可以调用一个jQuery元素modal()函数使用该元素的内容将显示一个模式对话框。

$("#element-id").modal();

(2) 作为一个独立的功能，可以通过一个jQuery对象，一个DOM元素，或者一个普通的字符串（可以包含HTML）创建一个模态对话框。

$("#element-id").modal({options}); 
$.modal("<div><h1>SimpleModal</h1></div>", {options});

其它说明

（1）在上面(2)中的options说的是一些选项和回调，它的参数如下：

选项和回调

选项
      以下是当前选项的一个列表，默认值在[Type:Value]中说明
      appendTo [String:\'body\']
      focus [Boolean:true] 把焦点保持在模态窗口（modal dialog）上
      opacity [Number:50] 设置overlay div的不透明度，1-100
      overlayId [String:\'simplemodal-overlay\'] overlay div的DOM元素的ID
      overlayCss [Object:{}] overlay div的CSS样式
      containerId [String:\'simplemodal-container\'] container div的DOM元素的ID
      containerCss [Object:{}] container div的CSS样式
      dataId [String:\'\'] data div的DOM元素的ID
      dataCss [Object:{}] data div的CSS样式
      minHeight [Number:200] container的最小高度
      minWidth [Number:200] container的最小宽度
      maxHeight [Number:null] container的最大高度，如果没有说明则使用window的高度
      maxWidth [Number:null] container的最大宽度，如果没有说明则使用window的宽度
      autoResize [Boolean:false] 当window调整大小时调整container的大小，使用时需小心，因为它可能会发生不可预知的效果。
      zIndex [Number:1000] z-Index的起始值
      close [Boolean:true] 如果为true，那么closeHTML,escClose,overClose将被使用，反之则不使用。
      closeHTML [String:\'\']
      closeClass [String:\'simplemodal-close\']
      escClose [Boolean:true]
      overlayClose [Boolean:false]
      position [Array:null]
      persist [Boolean:false]
      onOpen [Function:null]
      onShow [Function:null]
      onClose [Function:null]

回调
      回调函数使用JavaScript的apply函数来调用二：simplemodal的基本使用

先看下效果：

直接弹出一个层，层可以有按扭进行关闭，背景不能进行操作。多的不说，我直接写关键代码，在本文的最后会有源码下载

jQuery(function ($) {
    // Load dialog on page load
    //$(\'#basic-modal-content\').modal();

    // Load dialog on click
    $(\'#basic-modal .basic\').click(function (e) {
        $(\'#basic-modal-content\').modal();

        return false;
    });
});

就两行代码，是不是很简单。

三：simplemodal实现弹出一个是/否的确认对话框(类似于QQ邮箱删除提示)

不多说，直接显示效果

是不是很炫。直接贴出关键代码：

jQuery(function ($) {
    $(\'#confirm-dialog input.confirm, #confirm-dialog a.confirm\').click(function (e) {
        e.preventDefault();

        // example of calling the confirm function
        // you must use a callback function to perform the "yes" action
        confirm("Continue to the SimpleModal Project page?", function () {
            window.location.href = \'http://www.ericmmartin.com/projects/simplemodal/\';
        });
    });
});

function confirm(message, callback) {
    $(\'#confirm\').modal({
        closeHTML: "<a href=\'#\' title=\'Close\' class=\'modal-close\'>x</a>",
        position: ["20%",],
        overlayId: \'confirm-overlay\',
        containerId: \'confirm-container\', 
        onShow: function (dialog) {
            var modal = this;

            $(\'.message\', dialog.data[0]).append(message);

            // if the user clicks "yes"
            $(\'.yes\', dialog.data[0]).click(function () {
                // call the callback
                if ($.isFunction(callback)) {
                    callback.apply();
                }
                // close the dialog
                modal.close(); // or $.modal.close();
            });
        }
    });
}

四：simplemodal实现弹出一个ASPX页面(官网上是弹出一个php页面)

这个很实用，主要是考虑用户体验。官网用的是php页面，我用aspx页面来实现。直接贴关键代码。

要弹出页面的contact.aspx

<body>

        <div style=\'display: none\'>
            <div class=\'contact-top\'>
            </div>
            <div class=\'contact-content\'>
                <h1 class=\'contact-title\'>
                    Send us a message:</h1>
                <div class=\'contact-loading\' style=\'display: none\'>
                </div>
                <div class=\'contact-message\' style=\'display: none\'>
                </div>
                <form action=\'#\' style=\'display: none\'>
                <label for=\'contact-name\'>
                    *Name:</label>
                <input type=\'text\' id=\'contact-name\' class=\'contact-input\' name=\'name\' tabindex=\'1001\' />

                <label for=\'contact-email\'>
                    *Email:</label>
                <input type=\'text\' id=\'contact-email\' class=\'contact-input\' name=\'email\' tabindex=\'1002\' />
                <label for=\'contact-subject\'>
                    Subject:</label>
                <input type=\'text\' id=\'contact-subject\' class=\'contact-input\' name=\'subject\' value=\'\'
                    tabindex=\'1003\' />
                <label for=\'contact-message\'>
                    *Message:</label>
                <textarea id=\'contact-message\' class=\'contact-input\' name=\'message\' cols=\'40\' rows=\'4\'
                    tabindex=\'1004\'></textarea>
                <br />
                <label>
                    &nbsp;</label>
                <input type=\'checkbox\' id=\'contact-cc\' name=\'cc\' value=\'1\' tabindex=\'1005\' />
                <span class=\'contact-cc\'>Send me a copy</span>
                <br />
                <label>
                    &nbsp;</label>
                <button type=\'submit\' class=\'contact-send contact-button\' tabindex=\'1006\'>
                    Send</button>
                <button type=\'submit\' class=\'contact-cancel contact-button simplemodal-close\' tabindex=\'1007\'>
                    Cancel</button>
                <br />
                <input type=\'hidden\' name=\'token\' value=\'32928a0b3581a8afd529a835c4648bf6\' />
                </form>
            </div>
            <div class=\'contact-bottom\'>
                <a href=\'http://www.ericmmartin.com/projects/simplemodal/\'>Powered by SimpleModal</a></div>
        </div>

</body>

对于contact.js来说，直接修改data/contact.php为自己写的aspx页面名称即可。本例是contact.aspx

五：simplemodal的其它使用

官网还有其它的效果，可以去官网下载相应代码。我把官网的全部代码给大家贴出来。

全部Demo下载

欢迎转载，请标注原创地址http://www.cnblogs.com/yxhblog/archive/2012/07/11/2586712.html，谢谢。

分类模态窗口
标签 simplemodal , 弹出窗口 , jquery.simplemodal

秒客网

【原创】Jquery实现模态窗口—simplemodal - 杨新华

【原创】Jquery实现模态窗口—simplemodal

相关文章