Move content history to bs modal

Same as #4513 and 4514 but for content history

Content history is currently using mootools modal.
Without affecting in anyway the logic of the field we can use jQuery and bootstrap.

B/C
Should be 100% compatible

Test:
Apply the patch
Go to administrator -> Banners -> create a new banner
change the alternative text and save it again
repeat the last part for few more times

press the versions button
Everything should be ok

layouts/joomla/toolbar/versions.php

@@ -8,9 +8,29 @@
  */
 
 defined('_JEXEC') or die;
+
+JFactory::getDocument()->addStyleDeclaration('
+		@media only screen and (min-width : 768px) {
+			#versionsModal {
+			width: 80% !important;
+			margin-left:-40% !important;
+			height:auto;
+			}
+			#versionsModal #versionsModal-container .modal-body iframe {
+			margin:0;
+			padding:0;
+			display:block;
+			width:100%;
+			height:400px !important;
+			border:none;
+			}
+		}');
+
+$link = 'index.php?option=com_contenthistory&view=history&layout=modal&tmpl=component&item_id='
+	. (int) $displayData['itemId'] . '&type_id=' . $displayData['typeId'] . '&type_alias='
+	. $displayData['typeAlias'] . '&' . JSession::getFormToken() . '=1';
+
+echo JHtmlBootstrap::renderModal('versionsModal', array( 'url' => $link, 'title' => $displayData['title'] ,'height' => '600px', 'width' => '800px'), '');
 ?>
-<a rel="{handler: 'iframe', size: {x: <?php echo $displayData['height']; ?>, y: <?php echo $displayData['width']; ?>}}"
-	href="index.php?option=com_contenthistory&amp;view=history&amp;layout=modal&amp;tmpl=component&amp;item_id=<?php echo (int) $displayData['itemId']; ?>&amp;type_id=<?php echo $displayData['typeId']; ?>&amp;type_alias=<?php echo $displayData['typeAlias']; ?>&amp;<?php echo JSession::getFormToken(); ?>=1"
-	title="<?php echo $displayData['title']; ?>" class="btn btn-small modal_jform_contenthistory">
-	<i class="icon-archive"></i> <?php echo $displayData['title']; ?>
-</a>
+<button onclick="jQuery('#versionsModal').modal('show')" class="btn btn-small" data-toggle="modal" title="<?php echo $displayData['title']; ?>">
+<span class="icon-archive"></span><?php echo $displayData['title']; ?></button>

libraries/cms/form/field/contenthistory.php

@@ -43,14 +43,28 @@ protected function getInput()
 			. $this->id . '&item_id=' . $itemId . '&type_id=' . $typeId . '&type_alias='
 			. $this->element['data-typeAlias'] . '&' . JSession::getFormToken() . '=1';
 
-		// Load the modal behavior script.
-		JHtml::_('behavior.modal', 'button.modal_' . $this->id);
+		JFactory::getDocument()->addStyleDeclaration('
+		@media only screen and (min-width : 768px) {
+			#versionsModal {
+			width: 80% !important;
+			margin-left:-40% !important;
+			height:auto;
+			}
+			#versionsModal #versionsModal-container .modal-body iframe {
+			margin:0;
+			padding:0;
+			display:block;
+			width:100%;
+			height:400px !important;
+			border:none;
+			}
+		}');
 
-		$html[] = '		<button class="btn modal_' . $this->id . '" title="' . $label . '" href="' . $link . '"'
-			. ' rel="{handler: \'iframe\', size: {x: 800, y: 500}}">';
-		$html[] = '<i class="icon-archive"></i>';
-		$html[] = $label;
-		$html[] = '</button>';
+		// Include jQuery
+		JHtml::_('jquery.framework');
+		JHtml::_('bootstrap.modal');
+		$html[] = '<button href="#versionsModal" role="button" class="btn btn-small" data-toggle="modal" title="' . $label . '"><span class="icon-archive"></span>' . $label . '</button>';
+		$html[] = JHtmlBootstrap::renderModal('versionsModal', array( 'url' => $link, 'title' => $label ,'height' => '800px', 'width' => '600px'), '');
 
 		return implode("\n", $html);
 	}