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 に答える