Question

我试图在弹出的屏幕上创建一个div。这可以使用istockphp.com的jquery代码。问题是如何通过按钮而不是链接来实现这一点。

这是jsfiddle，例如。

链接代码：

<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

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

<强> FIDDLE

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

弹出Jquery div屏幕弹出

2 个答案: