Jquery：如何仅从元素的存在触发模态窗口答案

【问题标题】：Jquery: How do I trigger a modal window just from the existence of an elementJquery：如何仅从元素的存在触发模态窗口
【发布时间】：2009-08-08 15:56:27
【问题描述】：

如果提交时出现一个或多个错误，我有一个生成以下标记的表单：

<ul class="memError">
    <li>Error 1.</li>
    <li>Error 2.</li>
</ul>

我想将此元素设置为提交后出现的模态窗口，单击即可关闭。我有 jquery，但找不到触发模式窗口的正确事件。这是我正在使用的脚本，改编自an example I found here：

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $('.memError').load(function() {
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({
            'width': maskWidth,
            'height': maskHeight
        });

        //transition effect
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);
    });
    //if close button is clicked
    $('.memError').click(function(e) {
        $('#mask').hide();
        $('.memError').hide();
    });
});
//]]>
</script>

我已经为#mask 和.memError 设置了与example 几乎相同的样式，但是当我加载ul.memError 时，我什么也看不到。我尝试过其他 events 试图蒙混过关，但我还没有掌握所需的 javascript。

谁能指出我正确的方向？

【问题讨论】：

您希望在提交后发生这种情况（等文档准备好）还是 ajax 提交？
一个ul顺便没有load事件
> 您希望在提交之后发生这种情况（等文档准备好）还是 ajax 提交？这是一个非 ajax 提交，所以文档准备好了。本质上，如果指定的 ul 存在，我只需要这样做。

标签： javascript jquery modal-dialog

【解决方案1】：

如果这是一个普通的旧表单提交，那么只需检查 document.ready 上的 $('.memerror').length > 0 .. 如果它是真的，然后做剩下的。您不需要添加加载事件处理程序，因为 ul 已经加载。如果它是一个 ajax 提交，那么你应该使用 jquery forms plugin 的成功事件

【讨论】：

【解决方案2】：

我玩过现场活动等，但我似乎找不到触发它的方法。当您插入新项目以触发自定义事件时，您可以使用一些内联代码。

不确定这是否适合您的实施。

【讨论】：

【解决方案3】：

“memError”中的这些错误是使用 ajax 或 HTTP 页面加载加载的吗？

看看这个例子，不是回答你需要的所有东西，但可能会给你一些想法，虽然它是针对 onclick 事件的。但是，如果您的错误是使用某些 ajax 显示的，那么您可以将其更改为将 ajax 错误加载到页面中的时间。我稍后会尝试更新它。

$(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();


    $('<div id="dialog">'+mytext+'</div>').appendTo('body');            
        event.preventDefault();

                $("#dialog").dialog({                                   
                        width: 600,
                        modal: true,
                        close: function(event, ui) {
                                $("#dialog").remove();
                                }
                        });
    }); //close click
});


<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>

【讨论】：

【解决方案4】：

在您提供的示例中，您似乎尝试订阅错误的对象。尝试改用表单的 submit() 事件。您应该使用submit() 事件而不是表单按钮（或任何其他元素）上的单击事件，因为用户可以在填写表单时通过按回车键轻松提交表单而无需单击其按钮。这使您的模态窗口显示更加可靠。

<script type="text/javascript">
$(document).ready(function() {
    $('form').submit(function() {//<- Submit event

        // ...
        // Modal Window Code ommitted 
        // to make example code more clear
        // ...

        // From what I understand, the following line
        // is the "magic" that makes the modal window display
        // (I haven't tested this code)
        $(id).fadeIn(2000);
    });
});
</script>

上面的示例将订阅页面上所有表单上的submit事件。在大多数情况下，页面上只有一个。不过，这两种方式应该不会有太大的不同。

【讨论】：

【解决方案5】：

这是解决我问题的触发器：

if ($('.memError').length > 0) {
    $(function() {
        // ...
    });
}

感谢斯科特！这是一个普通的旧表单提交，在 HTTP 页面加载后出现错误消息，if($('.myElement').length > 0) 使我能够test for the existence of the error element。

【讨论】：