0

I want when a user is viewing a node, some of the node fields will be shown as a popup (without any buttons). How can I do it?

Thank You!

  • "without any buttons" - how they will be opened? – xurshid29 Apr 5 '14 at 6:32
  • I mean with no buttons on the popup so it does not have to be a form – Roni Gal Apr 5 '14 at 10:48
  • Can you describe a little bit more? – xurshid29 Apr 5 '14 at 11:08
2

I know that there is no codeWriting service here, but I can try to explain (with example) the process (not a universal way.. Will work only with the content the same type and same structure (suppose we have a content type with body, field_description and field_something)):

  • You need to customize (override) template of the content type:

example (node--MY_CONTENT_TYPE.tpl.php):

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <div class="body-field">
    <?php print render($content['body']); ?>
  </div>


  <div class="description-field">
    <?php print ctools_modal_text_button(t('Click to see DescriptionField'), 'show-as-a-popup/' . $node->nid .'/field_description/nojs', t('DescriptionField'), 'ctools-modal-custom-modal-style'); ?>
  </div>


  <div class="something-field">
    <?php print ctools_modal_text_button(t('Click to see SomethingField'), 'show-as-a-popup/' . $node->nid .'/field_something/nojs', t('SomethingField'), 'ctools-modal-custom-modal-style'); ?>
  </div>
</div>
  • Create custom module

  • Create a function in my_module.module file which includes ctools' libraries and sends javascript settings:

example:

function _myModuleIncludesModal() {
  static $added = FALSE;
  if ($added == FALSE) {
    $added = TRUE;

    ctools_include('modal');
    ctools_include('ajax');
    ctools_modal_add_js();

    $customModalStyle = array(
      'custom-modal-style' => array(
        'modalSize' => array(
          'type' => 'fixed',
          'width' => 800,
          'height' => 'auto',
          'addWidth' => 20,
          'addHeight' => 20,
          'contentRight' => 20,
          'contentBottom' => 20,
        ),
        'modalOptions' => array(
          'opacity' => (float) 0.6,
          'background-color' => '#000000',
        ),
        'closeText' => 'Close',
        'loadingText' => 'Loading...',
        'animation' => 'fadeIn',
        'animationSpeed' => 'fast',
      ),
    );

    drupal_add_js($customModalStyle, 'setting');
  }
}

example:

function my_module_menu() {
  $items = array();

  $items['show-as-a-popup/%node/%/%ctools_js'] = array(
    'title' => 'Node Field',
    'page callback' => 'nodeFieldPopupCallback',
    'page arguments' => array(1, 2, 3),
    'access callback' => 'user_access',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );

  return $items;
}
  • Create a callback function:

example:

function nodeFieldCallback($node, $fieldType, $js = NULL) {
  if (!$js) {
    drupal_access_denied();
    drupal_exit();
  }

  ctools_include('modal');
  ctools_include('ajax');

  $nodeWrapper = entity_metadata_wrapper('node', $node);

  $output = $nodeWrapper->{$fieldType}->value();

  $return[] = ctools_modal_command_display(t('PoPUp'), $output);
  print ajax_render($return);
  drupal_exit();
}
  • Finally call our _myModuleIncludesModal() in "specific" node pages:

example (template.php):

function MY_THEME_preprocess_node(&$variables) {
  if($variables['type'] == 'MY_CONTENT_TYPE') {
    _myModuleIncludesModal();
  }
}

Modal settings/options, templating and throbber templating can be found in ctools' help directory; Don't forget to flush the cache;

  • @RoniGal you need to install Entity API to be able to use entity_metadata_wrapper function.. – xurshid29 Apr 5 '14 at 13:16
  • I know. Thank you for the guide. I had to changed a little bit of the code but you gave me the direction. Thanks! – Roni Gal Apr 5 '14 at 18:38

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.