jquery - 屏幕上弹出Jquery div

Question

我试图在屏幕弹出窗口上创建一个 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">

任何帮助表示赞赏。

Answer 1

看看这里。这是你需要的吗？

小提琴

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的 .

Answer 2

最简单的解决方案是隐藏您的链接并在单击按钮时间接调用它，即

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

另一种解决方案是修改 istockphp 中的代码，并用 input.topopup 或您喜欢的任何内容替换第 3 行中的“a.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