0

What I would like to accomplish is to display the search block in a modal dialog when the user clicks on a search button that I have created. I have created a search button block (basically an image with a link) and now I would like to point to the search block and have it appear in a modal dialog. I just don't know to go from here, or if it is even possible to go this route. Can someone provide some pointers on what I need to do?

0

You can use Lightbox or Colorbox (there are modules for both).

Each has the ability to display inline content in a modal.

All you would need to do is add your search block to the page and hide it with CSS, then adjust your search button link to trigger the lightbox/colorbox.

If using colorbox, you would do something like the following:

Load content in a Colorbox

Check the "Enable Colorbox load" option in Colorbox settings.

This enables custom links that can open content in a Colorbox. Add the class "colorbox-load" to the link and build the url like this "[path]?width=500&height=500&iframe=true" or "[path]?width=500&height=500" if you don't want an iframe.

If you want to pass the width and height of the Colorbox as a percentage (useful for responsive designs), you can format the link like this "[path]?width=90%25&height=90%25&iframe=true" or "[path]?width=90%25&height=90%25", where the "%25" is the HTML entity for "%".

Other modules may activate this for easy Colorbox integration.

  • I looked at the Colorbox module and noticed that it doesn't support forms anymore. They recommend using modal forms. Which is unfortunate as I am using Colorbox for other things. – user5013 Apr 2 '15 at 23:02
  • I don't see any problem dropping the search block in one though, it doesn't have the complexity that normal forms have. I just tested it using colorbox directly and it worked great: var $form = $("#search-block-div"); $("#your-button").colorbox({inline:true, href:$form}); – Patrick Ryan Apr 2 '15 at 23:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.