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?
Add a comment
|
1 Answer
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.
answered Apr 2, 2015 at 21:58
-
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.– user5013Commented Apr 2, 2015 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});Commented Apr 2, 2015 at 23:45