CodePen

HTML

            
              <div class="callout">
  <img class="callout-image" src="http://placehold.it/100x100">
  <h3 class="callout-header">What's New Title</h3>
  <p class="callout-text">Click on the magnifying glass to get a popup search modal. It currently uses a "magic number" to keep the two different magnifying glasses aligned.</p>
  
</div>

<h3>Can this be refactored and avoided?</h3>
<div class="search-modal-container">
  <a id="search" class="search" href="#search" data-target=".search-modal"><img src="http://c3.goconstrukt.com/img/search.png" alt="Search"></a>
  <div class="search-modal is-hidden">
    <div class="search-modal-icon">
      <img class="search" src="http://c3.goconstrukt.com/img/search-active.png" alt="Search">
    </div>
    <div class="search-modal-input">
      <form action="" method="post">
        <input type="text" value="" placeholder="Search">
        <input type="submit" value="GO" class="btn btn-primary btn-full">
      </form>
    </div>
  </div>
</div>
            
          
!

CSS

            
              @menu-background-color: #D6D6D6;
@background-color: #333;
@zindexModal: 1050;
@text-color: #EEE;

html, body {
 	background-color: @background-color;
  padding: 0.5em;
  color: @text-color;
}

.callout {
    border-top: 1px dotted @text-color;
    border-bottom: 1px dotted @text-color;
    padding: 0.5em 0;
    margin-bottom: 0.5em;

    &:after {
        content: "";
        display: table;
        clear: both;
    }

    > img {
        float: left;
        margin-right: 0.5em;
    }
}

.callout-header {
    margin: 0;
}

.callout-text {
    margin: 0;
}

.search-modal-container {
    position: relative;
}

.search-modal {
    background-color: @menu-background-color;
    height: 100px;
    min-width: 300px;
    position: absolute;
    right: 0;
/* CSS MAGIC NUMBER */

  /* I know that magic numbers are evil, but I still come across situations where I don't know how to get rid of them. How do I get rid of this, and still have the magnifiying glasses overlap properly? */
  	top: -42px;
/* END MAGIC NUMBER */
  
    z-index: @zindexModal;
    box-shadow: 1px 5px 4px @background-color;
    border-radius: 2px;
}

.is-hidden {
 	display: none; 
}

.search {
 	float: right; 
}
.search-modal-icon {
    background-color: @background-color;
    position: relative;
    right: 0;
    float: right;
    width: 30px;
    height: 100px;

    &:after {
        content: '';
    		width: 0;
    		height: 0;
    		border-width: 50px 15px 50px 0;
    		border-style: solid;
    		border-color: transparent @background-color;
        position: absolute;
        right: 100%;
    }
}

.search-modal-icon .search {
    position: absolute;
    top: 42px;
    right: 0;
}

.search-modal-input {
    padding: 0.75em;
    float: left;
}

.search-modal-input .btn-full {
    padding: 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#search').on('click', function(e){
  var selector = $(this).attr('data-target');
  
  $(selector, '.search-modal-container').on('click', function(e){
    e.stopPropagation();
  });
  
  if ($(selector).hasClass('is-hidden')) {
    $(this).trigger('search-open', [selector]);
  }
  else {
    $(this).trigger('search-close', [selector]);
  }
  
  e.stopPropagation();
  e.preventDefault();
});

$('#search').on('search-open', function(e, selector){
  $(selector).removeClass('is-hidden');
  e.stopPropagation();
  e.preventDefault();
});

$('#search').on('search-close', function(e, selector){
  selector = selector || $(this).attr('data-target');
  $(selector).addClass('is-hidden');
  e.stopPropagation();
  e.preventDefault();
});

$('body').on('click', function(e){
  $('#search').trigger('search-close');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................