無法隱藏按鈕而沒有破壞腳本

Question

我試圖隱藏所有文本並在按鈕上單擊顯示覆蓋圖，然後可以添加文本並在點擊屏幕上的任意位置時刪除覆蓋圖。

出於某種原因，它適用於h1和p元素，但添加按鈕元素時會中斷。

這工作：

<div class="row"> 
    <div class="col-12"> 
     <h1 class="contact-title">Portland Based</h1> 
    </div> 
    <div class="col-12 text-center"> 
     <button type="button" href="#" class="btn btn-outline-warning letsTalk hidden-xs-down" id="contact">Let's talk</button> 
     <p>this works too</p> 
     <button type="button" href="#" class="btn btn-warning letsTalk hidden-sm-up">Let's talk</button> 
    </div> 
    </div> 

#overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    z-index: 10000; 
    display: block; 
} 


$("#contact").on('click', function (e) { 
    if (!$('#overlay').length) { 
    $('body').append('<div id="overlay"> </div>'); 
    $('h1').hide(); 
    $('p').hide(); 
    } 
}).keyup(function (e) { 
    if (e.which == 27) { 
    $('#overlay').remove(); 
    $('h1').show(); 
    $('p').show(); 
    } 
}).blur(function (e) { 
    $('#overlay').remove(); 
    $('h1').show(); 
    $('p').show(); 
}); 
$('body').click(function (e) { 
    if (!$(e.target).is('#contact')) { 
    $('#overlay').remove(); 
    $('h1').show(); 
    $('p').show(); 
    } 
}) 

這不：

$("#contact").on('click', function (e) { 
    if (!$('#overlay').length) { 
    $('body').append('<div id="overlay"> </div>'); 
    $('h1').hide(); 
    $('p').hide(); 
    $('button').hide(); 
    } 
}).keyup(function (e) { 
    if (e.which == 27) { 
    $('#overlay').remove(); 
    $('h1').show(); 
    $('p').show(); 
    $('button').show(); 
    } 
}).blur(function (e) { 
    $('#overlay').remove(); 
    $('h1').show(); 
    $('p').show(); 
    $('button').show(); 
}); 
$('body').click(function (e) { 
    if (!$(e.target).is('#contact')) { 
    $('#overlay').remove(); 
    $('h1').show(); 
    $('p').show(); 
    $('button').show(); 
    } 
}) 

任何幫助將是巨大的！ Codepen here

Answer 1

$("#contact").on('click blur keyup', function (e) { 
 
    if ($('#overlay').length == 0) { 
 
    $('body').append('<div id="overlay"> </div>'); 
 
    $('h1').hide(); 
 
    $('p').hide(); 
 
    $('button').hide(); 
 
    } 
 
    if (e.which == 27) { 
 
    $('#overlay').remove(); 
 
    $('h1').show(); 
 
    $('p').show(); 
 
    $('button').show(); 
 
    } 
 
}); 
 

 
$('body').click(function (e) { 
 
    if (!$(e.target).is('#contact')) { 
 
    $('#overlay').remove(); 
 
    $('h1').show(); 
 
    $('p').show(); 
 
    $('button').show(); 
 
    } 
 
});

#overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    filter:alpha(opacity=50); 
 
    -moz-opacity:0.5; 
 
    -khtml-opacity: 0.5; 
 
    opacity: 0.5; 
 
    z-index: 10000; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-12"> 
 
     <h1 class="contact-title">Portland Based</h1> 
 
    </div> 
 
    <div class="col-12 text-center"> 
 
     <button type="button" href="#" class="btn btn-outline-warning letsTalk hidden-xs-down" id="contact">Let's talk</button> 
 
     <p>this works too</p> 
 
     <button type="button" href="#" class="btn btn-warning letsTalk hidden-sm-up">Let's talk</button> 
 
    </div> 
 
    </div>

希望這將有助於你:)

Answer 2

我想你想隱藏的所有元素。如果我的假設錯了，請告訴我！

這是一個快速修復。我不是「手動」隱藏和顯示內容，而是將其包裝在content div中並相應地切換opacity。

$("#contact").on('click', function (e) { 
     if (!$('#overlay').length) { 
     $('body').append('<div id="overlay"> </div>'); 
     $("#content").css({ opacity: "0" }); 

     } 
    }).keyup(function (e) { 
     if (e.which == 27) { 
     $('#overlay').remove(); 
     $('#content').css({ 'opacity': '1' }); 
     } 
    }).blur(function (e) { 
     $('#overlay').remove(); 
     $('#content').css({ 'opacity': '1' }); 
    }); 
    $('body').click(function (e) { 
     if (!$(e.target).is('#contact')) { 
     $('#overlay').remove(); 
     $('#content').css({ 'opacity': '1' }); 
     } 
    }) 

$("#contact").on('click', function (e) { 
     if (!$('#overlay').length) { 
     $('body').append('<div id="overlay"> </div>'); 
     $("#content").css({ opacity: "0" }); 

     } 
    }).keyup(function (e) { 
     if (e.which == 27) { 
     $('#overlay').remove(); 
     $('#content').css({ 'opacity': '1' }); 
     } 
    }).blur(function (e) { 
     $('#overlay').remove(); 
     $('#content').css({ 'opacity': '1' }); 
    }); 
    $('body').click(function (e) { 
     if (!$(e.target).is('#contact')) { 
     $('#overlay').remove(); 
     $('#content').css({ 'opacity': '0' }); 
     } 
    }) 

Codepen