0

画面ポップアップでdivを作成しようとしています。これは、istockphp.com の jquery コードを使用しても問題ありません。問題は、リンクではなくボタンでこれを実現するにはどうすればよいかということです。

これは、たとえば jsfiddle です。

http://jsfiddle.net/DtB8C/

リンクコード:

<a href="#" class="topopup">Click Here Trigger</a>

ボタンのコード: (動作していません)

<input name="popup" type="button" value="popup" class="topopup" onClick="self.location='#'" style="width:7em">

どんな助けでも大歓迎です。

4

2 に答える 2

2

こちらをご覧ください。これはあなたが必要とするものですか？

フィドル

http://jsfiddle.net/DtB8C/2/

このコードを追加しました

$("input.topopup").click(function() {
    loading(); // loading
    setTimeout(function(){ // then show popup, deley in .5 second
        loadPopup(); // function show popup 
    }, 500); // .5 second
    return false;
});

の上にscript.js。a.topopupこれにより、その特定の をクリックすると、クリックしたときと同じ動作がトリガーされますinput。

于 2013-10-13T20:58:00.753 に答える
0

最も簡単な解決策は、リンクを非表示にして、ボタンをクリックしたときに間接的に呼び出すことです。

$("input.topopup").click(function() {
            $("a.topopup").click();
    });

もう 1 つの解決策は、istockphp のコードを少し変更し、3 行目の "a.topopup" を input.topopup などに置き換えることです。

/* 
    author: istockphp.com
*/
jQuery(function($) {

    $("a.topopup").click(function() {
            loading(); // loading
            setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup(); // function show popup 
            }, 500); // .5 second
    return false;
    });

    /* event for close the popup */
    $("div.close").hover(
                    function() {
                        $('span.ecs_tooltip').show();
                    },
                    function () {
                        $('span.ecs_tooltip').hide();
                    }
                );

    $("div.close").click(function() {
        disablePopup();  // function close pop up
    });

    $(this).keyup(function(event) {
        if (event.which == 27) { // 27 is 'Ecs' in the keyboard
            disablePopup();  // function close pop up
        }   
    });

    $("div#backgroundPopup").click(function() {
        disablePopup();  // function close pop up
    });

    $('a.livebox').click(function() {
        alert('Hello World!');
    return false;
    });


     /************** start: functions. **************/
    function loading() {
        $("div.loader").show();  
    }
    function closeloading() {
        $("div.loader").fadeOut('normal');  
    }

    var popupStatus = 0; // set value

    function loadPopup() { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001); 
            popupStatus = 1; // and set value to 1
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#toPopup").fadeOut("normal");  
            $("#backgroundPopup").fadeOut("normal");  
            popupStatus = 0;  // and set value to 0
        }
    }
    /************** end: functions. **************/
}); // jQuery End
于 2013-10-13T21:00:20.803 に答える