Question

我发现这张幻灯片弹出了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个或更多链接中使用它？

Answer 1

更改功能，以便您发送要使用的元素的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');
  });
}

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

用法：

closeOffersDialog('boxpopup', 'overlay');

现在。要在更多地方使用它，使用不同的ID制作叠加和弹出元素，并用这些来调用函数。

Answer 2

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

在jquery上复制一个函数

2 个答案: