Cómo añadir una ventana emergente de búsqueda tipo Lightbox en Squarespace

Nota: Es necesario tener instalado el complemento Lightbox.

Demostración de la superposición de búsqueda

Para añadir una capa de búsqueda, sigue estos pasos:

1. Añade una página «Search Overlay» con un bloque de búsqueda. La URL de esta página debe ser «search-overlay».

2. Añade un enlace con esta URL #lightbox>search-overlay

3. Añade el siguiente código a «Code Injection»

<!-- Search Overlay -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<style>
[id="lightbox>search-overlay"] .c-lightbox__content {
  padding: 0;
  min-height: 104px;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
  [id="lightbox>search-overlay"] .c-lightbox__content {
    max-width: 50%;
  }
}
[id="lightbox>search-overlay"] .sqs-block-search .search-input {
  padding: 17px 45px;
  font-size: 19px;
  border-color: #fff;
}
[id="lightbox>search-overlay"] .c-lightbox__close {
  top: -38px;
  -webkit-filter: brightness(0) invert(0.95);
  filter: brightness(0) invert(0.95);
}
@media (min-width: 768px) {
  [id="lightbox>search-overlay"] .c-lightbox__close {
    top: -28px;
    right: -28px;
  }
}
[id="lightbox>search-overlay"] .sqs-widget {
  top: -17px !important;
  left: auto !important;
}
[id="lightbox>search-overlay"] .sqs-search-ui-list {
  max-height: 360px;
}
@media (min-width: 768px) {
  [id="lightbox>search-overlay"] .sqs-search-ui-list {
    max-height: 460px;
  }
}
[id="lightbox>search-overlay"] .sqs-search-preview-ui {
  display: block !important;
  width: auto !important;
  position: relative !important;
}
[id="lightbox>search-overlay"] .sqs-search-ui-result {
  border: none !important;
  border-top: 1px solid #ddd !important;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/ryanmorr/ready@1/dist/ready.min.js"></script>
<script>
(function() {
  var off1 = ready('[id="lightbox>search-overlay"]', function() {
    off1();
    var lightbox = pluginLightboxItems.filter(function(i) {
      return i.id === 'lightbox>search-overlay';
    })[0];
    lightbox.options.afterOpen = function() {
      var input = lightbox.element.querySelector('input[type="search"]');
      setTimeout(function() { if (input) input.focus() }, 10);
    }
  });
  var off2 = ready('.yui3-searchpreviewdropdown', function(widget) {
    off2();
    var lightboxContent = document.querySelector('.c-lightbox__content-inner .sqs-layout');
    if (!lightboxContent) return null;
    lightboxContent.appendChild(widget);
  });
})();
</script>
<!-- end Search Overlay -->