(jquery) Tắt toàn bộ màn hình và đánh dấu một phần của trang?

Question

Theo ảnh chụp màn hình bên dưới. Tôi khá chắc ai đó đã làm điều này trước đây! =)

Vòng tròn là một phần thưởng, sẽ rất hài lòng với một giải pháp cho phép làm nổi bật của một "div" cho

Answer 1

See example of the following here →

Không cần plugin. Điều này có thể được thực hiện với rất ít mã jQuery, cho thấy một lớp phủ màn với div lựa chọn tại một z-index trên nó:

$('.expose').click(function(e){ 
    $(this).css('z-index','99999'); 
    $('#overlay').fadeIn(300); 
}); 

$('#overlay').click(function(e){ 
    $('#overlay').fadeOut(300, function(){ 
     $('.expose').css('z-index','1'); 
    }); 
}); 

Theo sau HTML & CSS ... chỉ cần thêm lớp expose cho bất kỳ yếu tố bạn muốn cô lập trên nhấp chuột:

<div class="expose">Some content</div> 
<textarea class="expose">Some content</textarea><br /> 
<input type="text" class="expose" value="Some content" /><br /> 
<div id="overlay"></div> 

.expose { 
    position:relative; 
} 

#overlay { 
    background:rgba(0,0,0,0.3); 
    display:none; 
    width:100%; height:100%; 
    position:absolute; top:0; left:0; z-index:99998; 
} 

See example →

Answer 2

Nhìn vào jQuery Tool's Expose plugin. Đó có lẽ là những gì bạn muốn.

Answer 3

tôi đã chơi off @ fiddle mVChr để làm nổi bật một hộp một lần một nút khác nhau được nhấp. Tôi hiện đang sử dụng tính năng này để đánh dấu trường nhập khi một nút đăng nhập được nhấp vào một trang web mới.

$('.expose').click(function(e){ 
    $('.lightbox').css('z-index','99999'); 
    $('#overlay').fadeIn(300); 
}); 

$('#overlay').click(function(e){ 
    $('#overlay').fadeOut(300, function(){ 
     $('.expose').css('z-index','1'); 
    }); 
}); 

Modified example based on @mVChr's code

<div class="buttonbox expose">When clicked</div> 
<div class="lightbox expose">This box lights up</div><br /><br /> 
<div id="overlay"></div> 

.buttonbox {  
    cursor:pointer; 
    float:left; 
    color:#1792C7; 
    border: 1px solid #1792C7; 
    padding:10px 16px; 
    background-color:transparent; 
    -webkit-transition: background linear .3s; 
    -moz-transition: background linear .3s; 
    -ms-transition: background linear .3s; 
    -o-transition: background linear .3s; 
    transition: background linear .3s; 
} 

.buttonbox:hover { 
    text-decoration: none; 
    color: #fff; 
    background-color: #1792C7; 
} 

.lightbox {  
    background:#fff; 
    border:1px solid #0d0d0d; 
    color: #0d0d0d; 
    cursor:pointer; 
    float:left; 
    margin:0px 0px 0px 5px; 
    padding:10px 16px; 
    text-align:center; 
} 

.expose { 
    position:relative; 
} 

#overlay { 
    background:rgba(0,0,0,0.5); 
    display:none; 
    width:100%; height:100%; 
    position:absolute; top:0; left:0; z-index:99998; 
} 

Answer 4

gì về việc sử dụng phác thảo CSS tài sản?

input[type="search"] { 
    -webkit-appearance: textfield; 
    background:url('icons.png') #fff no-repeat 5px -601px; 
    padding:0 10px 0 32px!important; 
    width:168px; 
    outline: 0px rgba(0,0,0,0) solid; 
    transition: outline-color .3s 
} 
input[type="search"]:focus{ 
    z-index:1000; 
    position:relative; 
    border:1px solid #f60; 
    outline: 5000px rgba(0,0,0,.8) solid ; 
} 

điều này áp dụng phác thảo rất lớn về đầu vào tập trung với chuyển tiếp mờ dần.

Ví dụ:

Answer 5

5 năm kể từ khi câu hỏi được hỏi, nhưng nó có thể giúp mọi người đến từ google

tôi đã phát triển một plugin cho vấn đề này ,

Bạn có thể tải từ: Hop on Github

Hãy cho tôi biết phản hồi của bạn.