如何打开一个新的模态窗口来关闭当前使用的simplemodal

时间:2015-11-05 00:53:13

标签: javascript modal-dialog simplemodal

我在项目的eric下使用了一个简单的模态。这是一个非常好的js

http://www.ericmmartin.com/projects/simplemodal/

我将osx模态窗口关闭为osx模态窗口中的一个按钮,同时想要打开一个简单的模态窗口。 但这并不容易。

如何打开一个基本模态关闭osx模态打开osx模态?

1 个答案:

答案 0 :(得分:0)

如果您查看页面http://www.ericmmartin.com/projects/simplemodal/

寻找回调

onClose个回调,您可以使用它来关闭并打开旧模式,

创建以下示例

两种模式HTML

//Modal One
<a href="#" class="demo button">Demo</a> 
<div id="basic-modal-content">      
<h3>Basic Modal Dialog</h3>
    <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>
        <button class="simplemodal-close">Close</button> <span>(or press ESC)</span>
    </p>
</div>
//Modal Two 
<div id="newmodal">     
<h3>New Modal Dialog</h3>

    <p>Hey I'm new modal and open when old one is closed, Hey I'm new modal and open when old one is closed,
    Hey I'm new modal and open when old one is closed, Hey I'm new modal and open when old one is closed,
    Hey I'm new modal and open when old one is closed, Hey I'm new modal and open when old one is closed</p>
</div>

JS代码

$(document).ready(function(){
    $('.demo').click(function (e) { //Open First Modal with Click Function
        e.preventDefault();
        $('#basic-modal-content').modal({ //First Modal Show
            onClose: function (dialog) { //On Close Function
                dialog.data.fadeOut('slow', function () {
                    dialog.overlay.fadeOut('slow', function () {
                        $.modal.close(); // must call this to close old modal and clear all data!
                        $('#newmodal').modal(); //Open New Modal
                    });
                });
            }
        });
    });
});

Working Fiddle Example