I recently created a simple code snippet to generate a modal highlight for an element.
card.click(function(){
cloak.show();
var cardClone = card.clone();
cloak.append(cardClone);
cardClone.css({
position: 'absolute',
top: card.offset().top - 7,
left: card.offset().left - 7,
}).addClass('selected');
var names = [
'arun',
'ajesh',
'amit'
];
var div = $('#card');
var cloak = $('#cloak');
var sel;
$.each(names, function(i, obj){
var card = $('<div/>').addClass('spacetype').html(obj);
div.append(card);
card.click(function(){
cloak.show();
var cardClone = card.clone();
cloak.append(cardClone);
cardClone.css({
position: 'absolute',
top: card.offset().top - 7,
left: card.offset().left - 7,
}).addClass('selected');
});
});
cloak.click(function(){
cloak.hide();
cloak.empty();
})body {
background-image: url('http://placekitten.com/1024/678')
}
.spacetype {
display: inline-block;
height: 100px;
width: 75px;
border: 1px solid black;
padding: 10px;
background-color: rgba(244,250,54, .6);
margin: 5px;
font-weight: bold;
border-radius: 7px;
font-family: Arial;
}
.selected {
border: 3px solid yellow;
z-index: 10;
}
#cloak {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0, 0.3);
display: none;
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="card">
</div>
<div id="cloak"></div>The approach is straightforward.
- Create a basic modal structure (a div with absolute positioning and alpha transparency).
- Duplicate the chosen box.
- Position the duplicate precisely based on the original box's offset.
Is there a CSS-only method to achieve this effect without cloning the DOM element?
Fiddle: https://jsfiddle.net/9ew7aq4v/