スクリプトを破ることなくボタンを非表示にすることはできません

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