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

I use a simple modal under the eric on my project. It's a very good js

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

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

I close the osx modal window as a button in osx modal window, at the same time wants to open a simple modal windows. But it was not easy.

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

How do you open a basic modal close osx modal open the osx modal?

你如何打开一个基本的莫代尔关闭osx模态打开osx模态?

1 个解决方案

#1

If you check the page http://www.ericmmartin.com/projects/simplemodal/,

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

Look for Callbacks

寻找回调

There is onClose callback which you can use to close and open new modal when old one closed,

有一个onClose回调,当旧的模态关闭时,你可以使用它来关闭和打开新的模态

Created following example

创建以下示例

Both Modals HTML

两个模态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 Code

$(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

工作小提琴示例

#1