Question

如果我点击任何一个文本框，任何人都可以帮我解决这个问题吗？

我在此网站中找到了这个想法：http://www.emanueleferonato.com/stuff/lightsoff/

我想要做的是当我点击文本框时，特定的文本框将高亮，如果我再次单击该文本框，它将删除灯光效果。

有谁知道怎么做？

html代码：

 <input type="text" readonly id="myname1" style="width:1000px; height:30px !important " />
 <br />
 <br />
 <input type="text" readonly id="myname2" style="width:1000px; height:30px !important " />

脚本代码：

<script>
$(function(){
    $('#myname1').on('click', function(){
        alert(1)      
    })    
})
$(function(){
    $('#myname2').on('click', function(){
        alert(2)      
    })    
})
</script>

Answer 1

我将如何做到这一点：

HTML：

<input type="text" readonly id="myname1" style="width:1000px; height:30px !important" />
<br />
<br />
<input type="text" readonly id="myname2" style="width:1000px; height:30px !important" />
<div id="overlay"></div>

CSS：

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0,0,0,.5); /* Semi-transparent */
}

.highlight {
    position: relative;
    z-index: 11;
}

JavaScript的：

$(function () {
    var lightsOff = false;
    $('#myname1,#myname2').on('click', function () {
        lightsOff = !lightsOff;
        $('#overlay').fadeToggle(1000); /* Choose desired delay */
        if (!lightsOff)
            setTimeout((function() {
                $(this).removeClass('highlight');
            }).bind(this), 1000); /* Same delay */
        else
            $(this).addClass('highlight');
    })
})

演示：http://jsfiddle.net/AP6kr/

Answer 2

这是我刚刚制作的一个基本版本，看看并乱用它。

因此我们创建了一个overlay，这将占据整个屏幕的黑色背景。然后，我们希望在我们设置div的{{1}}上设置另一个div我们想要展示的内容，以便它位于叠加层的顶部。

从这里开始，就像使用z-index: 1和fadeIn来获得我们想要的效果一样简单。

注意：这是非常基本的版本，你可以做得更好，然后这个乱七八糟地看看你可以用它做什么。这应该会给你一个良好的开端。

HTML：

fadeOut

CSS：

<div class="overlay"></div>
<div class="highlight">Test
    <br/><span class="on">On</span> | <span class="off">Off</span> 
</div>

jQuery的：

html, body {
    height: 100%;
    margin: 0;
}
.overlay {
    background: black;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    display: none;
}
.highlight {
    width: 100%;
    background: white;
    z-index: 1;
}

DEMO HERE

如何关灯效果

2 个答案:

HTML：

CSS：

jQuery的：