0

画像がクリックされたときにポップアップとして画像を表示するために単純なcssとjsを使用し、上部の閉じるボタンを使用して画像を閉じました。openimage と closeimage は両方とも、
オープン イメージ関数として実装した js 関数です。

function imgv(x,y,img)
{
     document.getElementById('imgv_i2').src = img;
     document.getElementById('imgv_i2').style.width = x;
     document.getElementById('imgv_i2').style.height = y;
     document.getElementById('imgv_i2').width = x;
     document.getElementById('imgv_i2').height = y;
    imgToMiddle('imgv_i2');
    document.getElementById('imgv_i2').style.display = 'block';
}

として画像を閉じる

function closeimgv()
{
    document.getElementById('imgv_i2').style.display = 'none';
    document.getElementById('imgv_close').style.display = 'none';
}

としてのイベント

<a href="javascript:void(0);"  onclick="imgv(101,101,'image url');"><img src="image src"></a>

外側をクリックしたときに画像を閉じるために、これらを次のように使用しました

$('#imgv_i2').click(function(event){
    event.stopPropagation();
});
$('html').click(function() {
if(document.getElementById('imgv_i2').style.display == 'block') {
            closeimgv();
    }
});

画像を開くためのクリックがトリガーされ、画像を閉じる機能もトリガーされたときに何が起こるかは、画像を$('html').click();開く機能がトリガーされた後にバインドし、画像機能を閉じた後にバインドを解除する方法です。ありがとう。

4

2 に答える 2

0

シック ボックスまたはポップアップには jquery プラグインを使用することをお勧めします。それらは非常にシンプルで、実装とカスタマイズが簡単だからです。多くのオープン ソース プラグインが利用可能で、それらを試してみると、必要な種類のカスタマイズが提供されます。

于 2013-10-28T08:27:21.870 に答える
0

試す

$(document).click(function(ev) {
    //avoid clicks on image itself
    if($(ev.originalTarget).is("whatever triggers image opening")) {return;} 

    if(document.getElementById('imgv_i2').style.display == 'block') {
            closeimgv();
    }
});
于 2013-10-28T07:45:55.240 に答える