Joomla! Programmierung/Framework/JHtmlBehavior/modal

Aus Joomla! Dokumentation
Wechseln zu: Navigation, Suche

Beschreibung[Bearbeiten]

JHTMLBehavior/modal läd alle benötigten Javascriptdateien in den <head></head> um eine Modalbox (Lightbox) darstellen zu können.

Syntax[Bearbeiten]

static modal( [$selector], [$params] )
  • @return void
  • @since Joomla 1.5
Parameter Datentyp Beschreibung Standardwert
$selector string Der Tag und die Klasse, auf die das Modal angewandt werden soll. a.modal
$params array Parameter für die Javascriptklasse. Werden als array ('name'=> 'wert') übergeben. array()

Beispiele[Bearbeiten]

Modal auf Link anwenden[Bearbeiten]

<?php JHtml::_('behavior.modal'); ?>
 
<!-- Eine Seite in der Modalbox laden -->
<a href="http://www.joomla.org" title="Joomla!.org" class="modal" rel="{handler: 'iframe'}">Joomla!.org</a>
 
<!-- Eine Seite mit einer bestimmten Größe in der Modalbox laden -->
<a href="http://www.joomla.org" title="Joomla!.org" class="modal" rel="{handler: 'iframe', size: {x: 570, y: 200}}">Joomla!.org</a>
 
<!-- Ein Bild in der Modalbox laden -->
<a href="http://cdn.joomla.org/images/logo.png" title="Joomla! Logo" class="modal">
<img src="http://cdn.joomla.org/images/logo.png" alt="Joomla! Logo" />
</a>

CSS[Bearbeiten]

Die CSS-Einstellungen finden sich unter \media\system\css\modal.css (in Joomla! 1.5.12):

.body-overlayed embed, .body-overlayed object, .body-overlayed select
{
	visibility:				hidden;
}
 
#sbox-window embed, #sbox-window object, #sbox-window select
{
	visibility:				visible;
}
 
#sbox-overlay
{
	position:				absolute;
	background-color:		#000;
}
 
#sbox-window
{
	position:				absolute;
	background-color:		#000;
	text-align:				left;
	overflow:				visible;
	padding:				10px;
	-moz-border-radius:		3px;
}
 
* html #sbox-window
{
	top: 50% !important;
	left: 50% !important;
}
 
#sbox-btn-close
{
	position:				absolute;
	width:					30px;
	height:					30px;
	right:					-15px;
	top:					-15px;
	background:				url(../images/closebox.png) no-repeat top left;
	border:					none;
}
 
.sbox-loading #sbox-content
{
	background-image:		url(../images/spinner.gif);
	background-repeat:		no-repeat;
	background-position:	center;
}
 
#sbox-content
{
	clear:					both;
	overflow:				auto;
	background-color:		#fff;
	height:					100%;
	width:					100%;
}
 
.sbox-content-image#sbox-content
{
	overflow:				visible;
}
 
#sbox-image
{
	display:				block;
}
 
.sbox-content-image img
{
	display:				block;
}
 
.sbox-content-iframe#sbox-content
{
	overflow:				visible;
}

Quellcode[Bearbeiten]

JHtmlBehavior::modal in Joomla! 2.5.4

Folder blue.png libraries

  • Folder red.png joomla
    • Folder green.png html
      • Folder yellow.png html
        • File php.png behavior.php
  1. public static function modal($selector = 'a.modal', $params = array())
  2. {
  3. $document = JFactory::getDocument();
  4.  
  5. // Load the necessary files if they haven't yet been loaded
  6. if (!isset(self::$loaded[__METHOD__]))
  7. {
  8. // Include MooTools framework
  9. self::framework();
  10.  
  11. // Load the javascript and css
  12. JHtml::_('script', 'system/modal.js', true, true);
  13. JHtml::_('stylesheet', 'system/modal.css', array(), true);
  14. }
  15.  
  16. $sig = md5(serialize(array($selector, $params)));
  17. if (isset(self::$loaded[__METHOD__][$sig]))
  18. {
  19. return;
  20. }
  21.  
  22. // Setup options object
  23. $opt['ajaxOptions'] = (isset($params['ajaxOptions']) && (is_array($params['ajaxOptions']))) ? $params['ajaxOptions'] : null;
  24. $opt['handler'] = (isset($params['handler'])) ? $params['handler'] : null;
  25. $opt['fullScreen'] = (isset($params['fullScreen'])) ? (bool) $params['fullScreen'] : null;
  26. $opt['parseSecure'] = (isset($params['parseSecure'])) ? (bool) $params['parseSecure'] : null;
  27. $opt['closable'] = (isset($params['closable'])) ? (bool) $params['closable'] : null;
  28. $opt['closeBtn'] = (isset($params['closeBtn'])) ? (bool) $params['closeBtn'] : null;
  29. $opt['iframePreload'] = (isset($params['iframePreload'])) ? (bool) $params['iframePreload'] : null;
  30. $opt['iframeOptions'] = (isset($params['iframeOptions']) && (is_array($params['iframeOptions']))) ? $params['iframeOptions'] : null;
  31. $opt['size'] = (isset($params['size']) && (is_array($params['size']))) ? $params['size'] : null;
  32. $opt['shadow'] = (isset($params['shadow'])) ? $params['shadow'] : null;
  33. $opt['overlay'] = (isset($params['overlay'])) ? $params['overlay'] : null;
  34. $opt['onOpen'] = (isset($params['onOpen'])) ? $params['onOpen'] : null;
  35. $opt['onClose'] = (isset($params['onClose'])) ? $params['onClose'] : null;
  36. $opt['onUpdate'] = (isset($params['onUpdate'])) ? $params['onUpdate'] : null;
  37. $opt['onResize'] = (isset($params['onResize'])) ? $params['onResize'] : null;
  38. $opt['onMove'] = (isset($params['onMove'])) ? $params['onMove'] : null;
  39. $opt['onShow'] = (isset($params['onShow'])) ? $params['onShow'] : null;
  40. $opt['onHide'] = (isset($params['onHide'])) ? $params['onHide'] : null;
  41.  
  42. $options = JHtmlBehavior::_getJSObject($opt);
  43.  
  44. // Attach modal behavior to document
  45. $document
  46. ->addScriptDeclaration(
  47. "
  48. window.addEvent('domready', function() {
  49.  
  50. SqueezeBox.initialize(" . $options . ");
  51. SqueezeBox.assign($$('" . $selector . "'), {
  52. parse: 'rel'
  53. });
  54. });"
  55. );
  56.  
  57. // Set static array
  58. self::$loaded[__METHOD__][$sig] = true;
  59.  
  60. return;
  61. }

Siehe auch[Bearbeiten]