You are here

Home » API reference » Modal forms (with ctools) 7

README.txt in Modal forms (with ctools) 7 

@codingStandardsIgnoreFile

CONTENTS OF THIS FILE
---------------------
   
 * Introduction
 * Requirements
 * Installation
 * Configuration
 * Supported forms
 * Links to the modal version of the forms
 * Webforms
 * Maintainers


INTRODUCTION
------------

Modal forms make use of the modal feature in the ctools module to open some
common forms in a modal window.


REQUIREMENTS
------------

This project requires the following:

 * Chaos tool suite (ctools) (https://drupal.org/project/ctools)

INSTALLATION
------------

Install as you would normally install a contributed Drupal. See:
https://drupal.org/documentation/install/modules-themes/modules-7 for further
information.


CONFIGURATION
-------------

 * Go to Configuration » Development » Modal forms to find all the configuration
   options.

SUPPORTED FORMS
---------------

* Log in (modal_forms/nojs/login)
* Request new password (modal_forms/nojs/password)
* Create new account (modal_forms/nojs/register)
* Contact (modal_forms/nojs/contact)
* Comment (modal_forms/nojs/comment/reply/%node)
* Webform (modal_forms/nojs/webform/%node)

Function that rewrite normal links to modal forms links (except for webforms)
can be activated on the modules configuration page.


LINKS TO THE MODAL VERSION OF THE FORMS
---------------------------------------

JavaScript that can rewrite standard links to these forms in to a modal
equivalent are provided, see the module configuration page to activate them.

To build links in code I recommend using the ctools_modal_text_button() function

$links[] = ctools_modal_text_button(t('Modal Login'), 'modal_forms/nojs/login', t('Login via modal'));
$links[] = ctools_modal_text_button(t('Modal Login'), 'modal_forms/nojs/login', t('Login via modal'),  'ctools-modal-modal-popup-small');

It is also possible to build links manually.

<a class="ctools-use-modal" href="modal_forms/nojs/login">Modal Login</a>
<a class="ctools-use-modal ctools-modal-modal-popup-small" href="modal_forms/nojs/login">Modal Login</a>

Popup styles and sizes:

The include CSS file tries to mimic the default Colorbox style.

The extra class "ctools-modal-modal-popup-small" in the links above tells the
project what popup style size to use. There are three options included.

* ctools-modal-modal-popup-small (defaults to 300x300)
* ctools-modal-modal-popup-medium (defaults to 550x450)
* ctools-modal-modal-popup-large (defaults to 80%x80%)

Go to the configurations page for Modal forms to adjust the sizes.


WEBFORMS
--------
There is support to open webforms in a modal by constructing special links.

A webform link should look like this one:

<a class="ctools-use-modal ctools-modal-modal-popup-large" href="/modal_forms/nojs/webform/[nid]">Link to click</a>

Replace [nid] with the node id of your webform.


MAINTAINERS
-----------

Current maintainers:
 * Fredrik Jonsson (frjo) (http://drupal.org/user/5546)
 * Renato Gonçalves (RenatoG) - https://www.drupal.org/user/3326031

File

README.txt
View source 
  1. @codingStandardsIgnoreFile

  2. 

  3. CONTENTS OF THIS FILE

  4. ---------------------

  5.    

  6.  * Introduction

  7.  * Requirements

  8.  * Installation

  9.  * Configuration

  10.  * Supported forms

  11.  * Links to the modal version of the forms

  12.  * Webforms

  13.  * Maintainers

  14. 

  15. 

  16. INTRODUCTION

  17. ------------

  18. 

  19. Modal forms make use of the modal feature in the ctools module to open some

  20. common forms in a modal window.

  21. 

  22. 

  23. REQUIREMENTS

  24. ------------

  25. 

  26. This project requires the following:

  27. 

  28.  * Chaos tool suite (ctools) (https://drupal.org/project/ctools)

  29. 

  30. INSTALLATION

  31. ------------

  32. 

  33. Install as you would normally install a contributed Drupal. See:

  34. https://drupal.org/documentation/install/modules-themes/modules-7 for further

  35. information.

  36. 

  37. 

  38. CONFIGURATION

  39. -------------

  40. 

  41.  * Go to Configuration » Development » Modal forms to find all the configuration

  42.    options.

  43. 

  44. SUPPORTED FORMS

  45. ---------------

  46. 

  47. * Log in (modal_forms/nojs/login)

  48. * Request new password (modal_forms/nojs/password)

  49. * Create new account (modal_forms/nojs/register)

  50. * Contact (modal_forms/nojs/contact)

  51. * Comment (modal_forms/nojs/comment/reply/%node)

  52. * Webform (modal_forms/nojs/webform/%node)

  53. 

  54. Function that rewrite normal links to modal forms links (except for webforms)

  55. can be activated on the modules configuration page.

  56. 

  57. 

  58. LINKS TO THE MODAL VERSION OF THE FORMS

  59. ---------------------------------------

  60. 

  61. JavaScript that can rewrite standard links to these forms in to a modal

  62. equivalent are provided, see the module configuration page to activate them.

  63. 

  64. To build links in code I recommend using the ctools_modal_text_button() function

  65. 

  66. $links[] = ctools_modal_text_button(t('Modal Login'), 'modal_forms/nojs/login', t('Login via modal'));

  67. $links[] = ctools_modal_text_button(t('Modal Login'), 'modal_forms/nojs/login', t('Login via modal'),  'ctools-modal-modal-popup-small');

  68. 

  69. It is also possible to build links manually.

  70. 

  71. Modal Login

  72. Modal Login

  73. 

  74. Popup styles and sizes:

  75. 

  76. The include CSS file tries to mimic the default Colorbox style.

  77. 

  78. The extra class "ctools-modal-modal-popup-small" in the links above tells the

  79. project what popup style size to use. There are three options included.

  80. 

  81. * ctools-modal-modal-popup-small (defaults to 300x300)

  82. * ctools-modal-modal-popup-medium (defaults to 550x450)

  83. * ctools-modal-modal-popup-large (defaults to 80%x80%)

  84. 

  85. Go to the configurations page for Modal forms to adjust the sizes.

  86. 

  87. 

  88. WEBFORMS

  89. --------

  90. There is support to open webforms in a modal by constructing special links.

  91. 

  92. A webform link should look like this one:

  93. 

  94. Link to click

  95. 

  96. Replace [nid] with the node id of your webform.

  97. 

  98. 

  99. MAINTAINERS

  100. -----------

  101. 

  102. Current maintainers:

  103.  * Fredrik Jonsson (frjo) (http://drupal.org/user/5546)

  104.  * Renato Gonçalves (RenatoG) - https://www.drupal.org/user/3326031