更新：

Question

翻转jquery的模态对话框

这是我创建对话框的代码：

$(document).ready(function(){
  [...]
  $('<div class="modal-popup"><div>TEST</div></div>')
            .hide() // Hide the dialog for now so we prevent flicker
            .appendTo(document.body)
            .filter('div') // Filter for the div tag only, script tags could surface
            .dialog({ // Create the jQuery UI dialog
                create: function () {
                   $(this).parent().wrap('<div class="flip" style="border:1px solid red;position:relative;z-index:50000;" />');
                },
                title: link.data('dialog-title'),
                dialogClass: "dialog_shadow",
                modal: true,
                resizable: false,
                draggable: true,
                show: { effect: 'fade', duration: 250 },
                hide: { effect: 'fade', duration: 400 },
                width: 'auto',
                beforeClose: function () {
                    resetForm($(this).find('form'));
                    $('input[type=submit]').css('cursor', 'hand');
                }                       
            })
            .end();
   });

当对话框出现时，当我点击链接时，我翻转对话框，我用这段代码显示相同的内容：

                $('.popCallActionRegister > a').click(function (e) {
                    e.preventDefault();

                    var content = $('div.flip').html(); // ModalDialog -> div.ui-dialog all html

                    $('div.flip').flippy({
                        verso: content,
                        direction: "LEFT",
                        duration: "250"
                    });
                });

这项工作非常好，但我在我的内容中丢失了所有Javascript，我无法拖动我的对话框。，调用ajax在我的新翻转内容中不起作用

如何让我的javascript保持活跃状态？因为它是相同的内容，我只是翻转...这就是全部。

更新：

HERE jsFiddle

此解决方案整合了以下命题

任何帮助将不胜感激！

Answer 1

jQuery事件只能附加到现有元素。我对你的html是什么以及你想要实现什么做了一些假设，所以我可能错了，但是当你这样做时：

var content = $('div.flip').html();

您正在复制div的内容，而不是附加到它的事件。所以它不是“禁用你的javascript”，你只是创建没有附加事件的新元素。所以试试这个：

var content = $('div.flip').clone(true, true);

那应该复制元素和所有事件，但是再次，因为我不知道翻转插件的幕后发生了什么，它可能不起作用。

如果您没有使用jQuery UI的模态，我会告诉您使用jQuery中的.on（）附加事件，或者使用来自翻转插件的onReverseFinish回调重新附加所有事件。

编辑1

好的，我看了一下flippy插件，它的工作方式与jQuery UI对话框冲突，我找不到一种方法让它们一起工作而不需要编辑插件的源代码。 Flippy将容器的Y轴设置为90度，通过移除容器内的内容并替换为您提供的任何内容作为“verso”参数来交换内容，并将其设置回0。问题是当删除对话框元素时jQuery UI运行一个方法来清除对话框小部件的所有引用（你可以看到即使叠加层也会消失）。

我的建议是找到一个更灵活的插件，或编辑你正在使用的插件。将内容拆分为两个子容器，而不是仅仅切换其显示属性，而不是删除翻转框的内容。例如，拆分您的内容：

<div class="flipbox">
    <div class="ui-dialog whatever">
        <div class="toggle_me">Content 1 - front</div>
        <div class="toggle_me" style="display:none;">Content 2 - back</div>
    </div>
</div>

找到插件的这一部分：

this.jO.empty().append(this._Verso);

并将其更改为：

this.jO.find('.toggle_me').toggle();

Answer 2

请参阅我的示例：http://codepen.io/jdnichollsc/pen/IcDge

Happy Codings

翻转模态jquery对话框禁用我的Javascript

更新：

HERE jsFiddle

2 个答案: