how to make a modal highlight in css/javascript

Question

I have written simple code to create a modal highlight of 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 logic is simple.

Put a plain simple modal (which is a div absolutely positioned with an alpha transparency).
Clone the selected box.
Absolutely position the clone as per the offset of the original box.

Is there a plain CSS way to achieve this as opposed to cloning the DOM element?

Fiddle: https://jsfiddle.net/9ew7aq4v/

http://stackoverflow.com/questions/15463854/pressed-button-css/15464016#15464016 possibly related answer — rlemon, Feb 23 '17 at 15:47

score 1 · Accepted Answer · answered Feb 23 '17 at 15:10

1

As far as I know, there is no CSS-only way to do this - you will need JavaScript for handling the click-events. There is a much simpler solution to your problem though, which avoids cloning the object (I guess this is what you want).

You can just use the z-index-property to push the card above the overlay. Notice that you have to explicitly set a position for z-index to work. See the updated fiddle: https://jsfiddle.net/9ew7aq4v/1/

answered Feb 23 '17 at 15:10

NikxDa

4,137
1
26
48

Line 16 and 21 in the JavaScript and line 15 in the CSS. I've updated the JavaScript to only handle the class change, not clone the object, and I've added `position: relative;` to the card class. – NikxDa Feb 23 '17 at 15:22

sergdenisov · Answer 2 · 2017-02-25T10:41:13.707

Yes, you could do something like this by pure HTML/CSS, just for fun:

body {
    background-image: url('http://placekitten.com/1024/678');
}
.spacetype {
    display: inline-block;
    position: relative;
    height: 100px;
    width: 75px;
    border: 1px solid black;
    padding: 10px;
    background-color: rgba(244, 250, 54, 0.6);
    margin: 5px;
    font-weight: bold;
    border-radius: 7px;
    font-family: Arial;
}

.spacetype:focus {
    outline: 0;
    z-index: 10;
    background-color: rgba(244, 250, 54, 0.8);
}

.spacetype:focus:after {
    position: absolute;
    content: '';
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 3px solid yellow;
    border-radius: 7px;
}

.spacetype:focus ~ #cloak {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0, 0.3);
    padding: 0;
    z-index: 0;
    pointer-events: none;
}

<div tabindex="1" class="spacetype">arun</div>
<div tabindex="2" class="spacetype">ajesh</div>
<div tabindex="3" class="spacetype">amit</div>
<div id="cloak"></div>

JSFiddle

But I think it's better to use a solution with Javascript because all the pure HTML/CSS solutions are not extendable/maintainable.

how to make a modal highlight in css/javascript

2 Answers2