如何隱藏div並使其可單擊以顯示媒體屏幕的疊加層

Question

我有一個read-more div，在黃色背景中有一個字體真棒圖標。 僅在屏幕尺寸小於767px時顯示。 當此div顯示時，用戶可以單擊它以查看.overlay 。 如果屏幕尺寸大於768px，則不應顯示read-more ，當用戶將鼠標懸停在圖像上時，覆蓋顯示（此時此功能正常）。 我無法解決的問題：

1. 如何為屏幕> 768px完全隱藏read-more div？
2. 如何使read-more div可點擊並在點擊時顯示.overlay ？

 $(function() { var overlay = $('.overlay'); $("#product-detailscar").one('click', function(e) { overlay.appendTo(document.body) }); }); 

 @media screen and (max-width: 767px) { .read-more i { padding: 5px 10px; display: inline-block; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -moz-box-shadow: 0px 0px 2px #888; -webkit-box-shadow: 0px 0px 2px #888; box-shadow: 0px 0px 2px #888; background-color: yellow; color: red; position: absolute; left: 50%; top: 50%; } } @media screen and (min-width: 768px) { .product-detailscar:hover .overlay { opacity: 1; } } .product-detailscar .overlay { /*.well.carousel .overlay {*/ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; border-radius: 0; background: #F7F7F7; color: #FFF; padding: 10px; text-align: left; border-top: 1px solid #A10000; border-bottom: 1px solid #A10000; /*vertical-align: middle;*/ -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; /*padding: 25px; text-align: center;*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="read-more"><i class="fa fa-file-text-o" aria-hidden="true"></i> </div> 

Answer 1

隱藏.read-more ：

@media screen and (min-width: 768px) {
     #read-more {
         display:none;
     }
}

要使.overlay可點擊：

$("#read-more").click(function() {
    $(".overlay").show();
});

要在點擊時隱藏.overlay ：

$(".overlay").click(function() {
    $(".overlay").hide();
});