Modal.php 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <?php
  2. /**
  3. * @link http://www.yiiframework.com/
  4. * @copyright Copyright (c) 2008 Yii Software LLC
  5. * @license http://www.yiiframework.com/license/
  6. */
  7. namespace yii\bootstrap;
  8. use Yii;
  9. use yii\helpers\ArrayHelper;
  10. /**
  11. * Modal renders a modal window that can be toggled by clicking on a button.
  12. *
  13. * The following example will show the content enclosed between the [[begin()]]
  14. * and [[end()]] calls within the modal window:
  15. *
  16. * ~~~php
  17. * Modal::begin([
  18. * 'header' => '<h2>Hello world</h2>',
  19. * 'toggleButton' => ['label' => 'click me'],
  20. * ]);
  21. *
  22. * echo 'Say hello...';
  23. *
  24. * Modal::end();
  25. * ~~~
  26. *
  27. * @see http://getbootstrap.com/javascript/#modals
  28. * @author Antonio Ramirez <amigo.cobos@gmail.com>
  29. * @author Qiang Xue <qiang.xue@gmail.com>
  30. * @since 2.0
  31. */
  32. class Modal extends Widget
  33. {
  34. const SIZE_LARGE = "modal-lg";
  35. const SIZE_SMALL = "modal-sm";
  36. const SIZE_DEFAULT = "";
  37. /**
  38. * @var string the header content in the modal window.
  39. */
  40. public $header;
  41. /**
  42. * @var string additional header options
  43. * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
  44. * @since 2.0.1
  45. */
  46. public $headerOptions;
  47. /**
  48. * @var array body options
  49. * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
  50. * @since 2.0.7
  51. */
  52. public $bodyOptions = ['class' => 'modal-body'];
  53. /**
  54. * @var string the footer content in the modal window.
  55. */
  56. public $footer;
  57. /**
  58. * @var string additional footer options
  59. * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
  60. * @since 2.0.1
  61. */
  62. public $footerOptions;
  63. /**
  64. * @var string the modal size. Can be [[SIZE_LARGE]] or [[SIZE_SMALL]], or empty for default.
  65. */
  66. public $size;
  67. /**
  68. * @var array|false the options for rendering the close button tag.
  69. * The close button is displayed in the header of the modal window. Clicking
  70. * on the button will hide the modal window. If this is false, no close button will be rendered.
  71. *
  72. * The following special options are supported:
  73. *
  74. * - tag: string, the tag name of the button. Defaults to 'button'.
  75. * - label: string, the label of the button. Defaults to '&times;'.
  76. *
  77. * The rest of the options will be rendered as the HTML attributes of the button tag.
  78. * Please refer to the [Modal plugin help](http://getbootstrap.com/javascript/#modals)
  79. * for the supported HTML attributes.
  80. */
  81. public $closeButton = [];
  82. /**
  83. * @var array the options for rendering the toggle button tag.
  84. * The toggle button is used to toggle the visibility of the modal window.
  85. * If this property is false, no toggle button will be rendered.
  86. *
  87. * The following special options are supported:
  88. *
  89. * - tag: string, the tag name of the button. Defaults to 'button'.
  90. * - label: string, the label of the button. Defaults to 'Show'.
  91. *
  92. * The rest of the options will be rendered as the HTML attributes of the button tag.
  93. * Please refer to the [Modal plugin help](http://getbootstrap.com/javascript/#modals)
  94. * for the supported HTML attributes.
  95. */
  96. public $toggleButton = false;
  97. /**
  98. * Initializes the widget.
  99. */
  100. public function init()
  101. {
  102. parent::init();
  103. $this->initOptions();
  104. echo $this->renderToggleButton() . "\n";
  105. echo Html::beginTag('div', $this->options) . "\n";
  106. echo Html::beginTag('div', ['class' => 'modal-dialog ' . $this->size]) . "\n";
  107. echo Html::beginTag('div', ['class' => 'modal-content']) . "\n";
  108. echo $this->renderHeader() . "\n";
  109. echo $this->renderBodyBegin() . "\n";
  110. }
  111. /**
  112. * Renders the widget.
  113. */
  114. public function run()
  115. {
  116. echo "\n" . $this->renderBodyEnd();
  117. echo "\n" . $this->renderFooter();
  118. echo "\n" . Html::endTag('div'); // modal-content
  119. echo "\n" . Html::endTag('div'); // modal-dialog
  120. echo "\n" . Html::endTag('div');
  121. $this->registerPlugin('modal');
  122. }
  123. /**
  124. * Renders the header HTML markup of the modal
  125. * @return string the rendering result
  126. */
  127. protected function renderHeader()
  128. {
  129. $button = $this->renderCloseButton();
  130. if ($button !== null) {
  131. $this->header = $button . "\n" . $this->header;
  132. }
  133. if ($this->header !== null) {
  134. Html::addCssClass($this->headerOptions, ['widget' => 'modal-header']);
  135. return Html::tag('div', "\n" . $this->header . "\n", $this->headerOptions);
  136. } else {
  137. return null;
  138. }
  139. }
  140. /**
  141. * Renders the opening tag of the modal body.
  142. * @return string the rendering result
  143. */
  144. protected function renderBodyBegin()
  145. {
  146. return Html::beginTag('div', $this->bodyOptions);
  147. }
  148. /**
  149. * Renders the closing tag of the modal body.
  150. * @return string the rendering result
  151. */
  152. protected function renderBodyEnd()
  153. {
  154. return Html::endTag('div');
  155. }
  156. /**
  157. * Renders the HTML markup for the footer of the modal
  158. * @return string the rendering result
  159. */
  160. protected function renderFooter()
  161. {
  162. if ($this->footer !== null) {
  163. Html::addCssClass($this->footerOptions, ['widget' => 'modal-footer']);
  164. return Html::tag('div', "\n" . $this->footer . "\n", $this->footerOptions);
  165. } else {
  166. return null;
  167. }
  168. }
  169. /**
  170. * Renders the toggle button.
  171. * @return string the rendering result
  172. */
  173. protected function renderToggleButton()
  174. {
  175. if (($toggleButton = $this->toggleButton) !== false) {
  176. $tag = ArrayHelper::remove($toggleButton, 'tag', 'button');
  177. $label = ArrayHelper::remove($toggleButton, 'label', 'Show');
  178. if ($tag === 'button' && !isset($toggleButton['type'])) {
  179. $toggleButton['type'] = 'button';
  180. }
  181. return Html::tag($tag, $label, $toggleButton);
  182. } else {
  183. return null;
  184. }
  185. }
  186. /**
  187. * Renders the close button.
  188. * @return string the rendering result
  189. */
  190. protected function renderCloseButton()
  191. {
  192. if (($closeButton = $this->closeButton) !== false) {
  193. $tag = ArrayHelper::remove($closeButton, 'tag', 'button');
  194. $label = ArrayHelper::remove($closeButton, 'label', '&times;');
  195. if ($tag === 'button' && !isset($closeButton['type'])) {
  196. $closeButton['type'] = 'button';
  197. }
  198. return Html::tag($tag, $label, $closeButton);
  199. } else {
  200. return null;
  201. }
  202. }
  203. /**
  204. * Initializes the widget options.
  205. * This method sets the default values for various options.
  206. */
  207. protected function initOptions()
  208. {
  209. $this->options = array_merge([
  210. 'class' => 'fade',
  211. 'role' => 'dialog',
  212. 'tabindex' => -1,
  213. ], $this->options);
  214. Html::addCssClass($this->options, ['widget' => 'modal']);
  215. if ($this->clientOptions !== false) {
  216. $this->clientOptions = array_merge(['show' => false], $this->clientOptions);
  217. }
  218. if ($this->closeButton !== false) {
  219. $this->closeButton = array_merge([
  220. 'data-dismiss' => 'modal',
  221. 'aria-hidden' => 'true',
  222. 'class' => 'close',
  223. ], $this->closeButton);
  224. }
  225. if ($this->toggleButton !== false) {
  226. $this->toggleButton = array_merge([
  227. 'data-toggle' => 'modal',
  228. ], $this->toggleButton);
  229. if (!isset($this->toggleButton['data-target']) && !isset($this->toggleButton['href'])) {
  230. $this->toggleButton['data-target'] = '#' . $this->options['id'];
  231. }
  232. }
  233. }
  234. }