jQuery:如何仅从元素的存在触发模态窗口 [英] Jquery: How do I trigger a modal window just from the existence of an element

问题描述

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

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

我想将此元素设置为提交后出现的模式窗口，单击即可关闭.我有jquery，但找不到正确的事件来触发模式窗口.这是我正在使用的脚本，改编自一个示例我在这里找到:

<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设置了与事件试图弄混，但我还没有掌握javascript为此所需.

有人能指出我正确的方向吗?

解决方案

如果这是一个普通的旧表单提交，则只需在document.ready ..上检查$('.memerror').length> 0，如果它是正确的，然后休息.您不需要添加加载事件处理程序，因为ul已经加载.如果是ajax提交，则您应该使用 jquery表单插件 的成功事件>

I have a form that generates the following markup if there is one or more errors on submit:

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

I want to set this element as a modal window that appears after submit, to be closed with a click. I have jquery, but I can't find the right event to trigger the modal window. Here's the script I'm using, adapted from 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>

I've set styles for #mask and .memError pretty much identical to the example, but I can't get anything to appear when I load the ul.memError. I've tried other events trying to muddle through, but I don't yet have the grasp of javascript needed for this.

Can anyone point me in the right direction?

解决方案

if this is a plain old form submit, then just check $('.memerror').length > 0 on document.ready .. if it's true, then do the rest. you dont' need to add a load event handler as the ul is already loaded. if its an ajax submit, then you should be using the success event of the jquery forms plugin

这篇关于jQuery:如何仅从元素的存在触发模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！