Add setting to show views exposed filters in modal

If you want a nice exposed filter in views with modal, follow this simple guide.

Fixed my problem by myself. Now my exposed filters, are in a modal window with bootstrap theme. Here is my code and the result in a screenshoot.

create a file "views-exposed-form.tpl.php" in your bootstrap subtheme and place it under templates.

Fill the file with following code:

/**
 * @file
 * This template handles the layout of the views exposed filter form.
 *
 * Variables available:
 * - $widgets: An array of exposed form widgets. Each widget contains:
 * - $widget->label: The visible label to print. May be optional.
 * - $widget->operator: The operator for the widget. May be optional.
 * - $widget->widget: The widget itself.
 * - $sort_by: The select box to sort the view using an exposed form.
 * - $sort_order: The select box with the ASC, DESC options to define order. May be optional.
 * - $items_per_page: The select box with the available items per page. May be optional.
 * - $offset: A textfield to define the offset of the view. May be optional.
 * - $reset_button: A button to reset the exposed filter applied. May be optional.
 * - $button: The submit button for the form.
 *
 * @ingroup views_templates
 */
?>
<?php if (!empty($q)): ?>
  <?php
    // This ensures that, if clean URLs are off, the 'q' is added first so that
    // it shows up first in the URL.
    print $q;
  ?>
<?php endif; ?>
<!-- Button trigger modal -->
<a data-toggle="tooltip" data-placement="right" title="<?php print t('Change settings'); ?>">
<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">
  <span class="glyphicon glyphicon-cog"></span></a>
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Filter</h4>
      </div>
      <div class="modal-body">
 <div class="views-exposed-form">
  <div class="views-exposed-widgets clearfix">
    <?php foreach ($widgets as $id => $widget): ?>
      <div id="<?php print $widget->id; ?>-wrapper" class="views-exposed-widget views-widget-<?php print $id; ?>">
        <?php if (!empty($widget->label)): ?>
          <label for="<?php print $widget->id; ?>">
            <?php print $widget->label; ?>
          </label>
        <?php endif; ?>
        <?php if (!empty($widget->operator)): ?>
          <div class="views-operator">
            <?php print $widget->operator; ?>
          </div>
        <?php endif; ?>
        <div class="views-widget">
          <?php print $widget->widget; ?>
        </div>
        <?php if (!empty($widget->description)): ?>
          <div class="description">
            <?php print $widget->description; ?>
          </div>
        <?php endif; ?>
      </div>
    <?php endforeach; ?>
    <?php if (!empty($sort_by)): ?>
      <div class="views-exposed-widget views-widget-sort-by">
        <?php print $sort_by; ?>
      </div>
      <div class="views-exposed-widget views-widget-sort-order">
        <?php print $sort_order; ?>
      </div>
    <?php endif; ?>
    <?php if (!empty($items_per_page)): ?>
      <div class="views-exposed-widget views-widget-per-page">
        <?php print $items_per_page; ?>
      </div>
    <?php endif; ?>
    <?php if (!empty($offset)): ?>
      <div class="views-exposed-widget views-widget-offset">
        <?php print $offset; ?>
      </div>
    <?php endif; ?>
    <div class="views-exposed-widget views-submit-button">
      <?php print $button; ?>
    </div>
    <?php if (!empty($reset_button)): ?>
      <div class="views-exposed-widget views-reset-button">
        <?php print $reset_button; ?>
      </div>
    <?php endif; ?>
  </div>
 </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary"><?php print t('Save changes'); ?></button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Here the css to hide the "apply" button from form. We use it from modal window.

Place the css in you theme css.

.views-exposed-widget .form-submit {
  display: none;
  }

That's it. Save all and clear your cache.

- Remember that all exposed filters now display in a modal. Tested only with the Bootstrap theme 7.x-3.0.

Screenshot - Filter button
https://docs.google.com/file/d/0B0uqsBYPx2xFbFdoRllqdVE2RWc/edit?usp=dri...

Screenshot - Modal window
https://docs.google.com/file/d/0B0uqsBYPx2xFU21rdko5cWlnMDg/edit?usp=dri...

With this .tpl file you can use a fieldset too. Place the fieldset code from Bootstrap with the modal code. If you have questions, tell me ;)

Regards,

Marvin