1

我发现这张幻灯片弹出 jquery 函数：

function openOffersDialog() {

    $('#overlay').fadeIn('fast', function() {
        $('#boxpopup').css('display','block');
        $('#boxpopup').animate({'left':'30%'},500);
    });
}


    function closeOffersDialog(prospectElementID) {
        $(function($) {
            $(document).ready(function() {
                $('#' + prospectElementID).css('position','absolute');
                $('#' + prospectElementID).animate({'left':'-100%'}, 500, function() {
                    $('#' + prospectElementID).css('position','fixed');
                    $('#' + prospectElementID).css('left','100%');
                    $('#overlay').fadeOut('fast');
                });
            });
        });
    }

这是html

<body onload="openOffersDialog();">
<div id="wrapper">
<div id="overlay" class="overlay"></div>
<a onclick="openOffersDialog();">Click Here To See The PopUp</a>
<div id="boxpopup" class="box">
    <a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
    </div>
</div>
</div>
</body>

那么如何复制该功能，以便可以在同一页面上的 2 个或多个链接中使用它？

4

2 回答 2

0

更改函数，以便您发送要使用的元素的 ID：

function openOffersDialog(overlay, popup) {
  $('#' + overlay).fadeIn('fast', function() {
    $('#' + popup).css('display','block');
    $('#' + popup).animate({'left':'30%'},500);
  });
}

用法：

openOffersDialog('overlay', 'boxpopup');

将叠加层的 ID 添加到关闭函数中：

function closeOffersDialog(prospectElementID, overlay) {
  $('#' + prospectElementID).css('position','absolute');
  $('#' + prospectElementID).animate({'left':'-100%'}, 500, function() {
    $('#' + prospectElementID).css('position','fixed');
    $('#' + prospectElementID).css('left','100%');
    $('#' + overlay).fadeOut('fast');
  });
}

注意：关闭函数具有绑定ready事件的代码，事件处理程序包含绑定ready事件的代码，事件处理程序包含要执行的实际代码。当您在ready事件发生后绑定事件时，jQuery 将立即执行事件处理程序，这就是该代码起作用的原因。该函数当然不应该绑定ready事件。

用法：

closeOffersDialog('boxpopup', 'overlay');

现在。要在更多地方使用它，请使用不同的 ID 制作覆盖和弹出元素，并使用它们调用函数。

于 2013-05-24T07:27:58.587 回答
-1

它像ajax面板一样一次调用多个函数，您也可以将其用于幻灯片

于 2013-05-24T07:31:22.800 回答