Direkt zum Inhalt

Node Form als PopUp anzeigen

Die Darstellung von Nodes als Popup läßt sich in Drupal mit wengen Schritten erreichen.

  • einer jQuery Bibliothek, z.B. Colorbox (http://www.jacklmoore.com/colorbox/)
  • einem eigenen Drupal Modul:
    • zum Laden des JavaScripts und evtl CSS
    • preprocess_page Funktion zum Hinzufügen einer theme_hook_suggestion für eine reduzierte page.tpl.php
  • eigenes Page-Template für die Node-Ausgabe ohne Header, Sidebars und Footer Bereiche
  • jQuery Script zum Start des Popups

 

Beispiel HTML

...
<a href=# class="modal-dialog">my link text</a>
...

eigenes Drupal Modul (my_module.module)

function my_module_init() {
  if ($path = libraries_get_path('colorbox')) {
    drupal_add_js($path . '/jquery.colorbox-min.js');
    drupal_add_js(drupal_get_path('module', my_module') . '/js/my_module.js', array('scope' => 'footer')); 
    drupal_add_css($path . '/example1/colorbox.css');
  }
}

function my_module_preprocess_page(&$vars) {
  if (!empty($vars['node'])) {
    switch ($vars['node']->type) {
      case 'my_nodetype':
        $vars['theme_hook_suggestions'][] = 'page__modal_dialog';
        break;
    }
  }
}

Page Template (page--modal-dialog.tpl.php)

<div id="content">
   <?php print render($page['content']); ?>
</div>

JavaScript Start (modal_dialog.js)

jQuery.noConflict();
(function ($) {
  Drupal.behaviors.my_module = {
    attach:function (context) {
      $('a.modal-dialog')
        .colorbox({
          width: "1200px",
          height: "600px",
          opacity: 0.3,
      });
      $(document).bind('cbox_closed', function () {
$('#cboxOverlay').remove();
$('#colorbox').remove();
      });
      return false;
    }
  };

 

Tag