Question

我有这个JQuery代码：

function JQueryPopup(value) {
    $(value).toggle();

    $('#JQueryClose').click(function(){
        $(value).hide();
    });

    $( document ).on( 'click', function ( e ) {
        $(value).hide();
    });

    $( document ).on( 'keydown', function ( e ) {
        if ( e.keyCode === 27 ) { // ESC
            $(value).hide();
        }
    });
}

和一个调用此函数的HTML按钮，它似乎没有显示弹出窗口/ div。

这是我的完整代码的小提琴：http://jsfiddle.net/XHLY8/3/

P.S。我在另一个页面上有这个代码，我调用这样的函数：

<script type="text/javascript">JQueryPopup('#customer_popup_notes');</script>

工作正常。

Answer 1

您需要添加以下内容：

$('#inbox_button').on('click', function(event){
  event.preventDefault(); // This isn't critical, but you would need 
  event.stopPropagation();
  JQueryPopup('#inbox_div');
});

您希望停止点击事件冒泡并触发以下内容：

$( document ).on( 'click', function { ... });

否则您的#inbox_div将被隐藏，然后才能看到它。

这是working fiddle。

我建议您阅读stopPropagation和preventDefault。

Answer 2

你不需要

$( document ).on( 'click', function ( e ) {
        $(value).hide();
    });

无论你在哪里点击，它都会隐藏底部div。

工作fiddle

弹出窗口没有显示div

2 个答案: