選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

Modal.php 7.6KB

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