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>
  <div class="search-modal-container">
    <a id="search" class="search" href="#search" data-target=".search-modal"><i class="icon icon-20 icon-search"></i></a>
    <div class="search-modal is-hidden">
      <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>
  <h3>Can this be refactored and avoided?</h3>

            
          
!

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 {
  float: right;
  position: relative;
  
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.search-modal {
    background-color: @menu-background-color;
    height: 100px;
    min-width: 325px;
    position: absolute;
    right: 0;
    z-index: @zindexModal;
    box-shadow: 1px 5px 4px @background-color;
    border-radius: 2px;
}

.is-hidden {
   display: none; 
}

.search {
  float: right;
}

.icon-search {
 	width: 20px;
  height: 100px;
  display: block;
  background: url("http://c3.goconstrukt.com/img/search.png") no-repeat center center;
}

.icon-search.is-active {
  position: relative;
  z-index: @zindexModal + 1;
 	background: @background-color url("http://c3.goconstrukt.com/img/search-active.png") no-repeat center center;
  
      &: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-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');
  
  $(this).find(">:first-child").addClass('is-active');
  
  $(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');
  $(this).find(">:first-child").removeClass('is-active');
  $(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 ..................