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

How to open a new modal window to close the current use of simplemodal

本文关键字:simplemode 窗口 模态 何打开 一个      更新时间:2023-09-26

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

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

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

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

如果检查页面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
                    });
                });
            }
        });
    });
});

工作Fiddle示例