Как вывести модуль в модальном окне - Joomla3 / Bootstrap? - Joomla 3.x: Шаблоны, разметка и макеты вывода

Fingros

Захожу иногда
61
1 / 0

Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« : 16.03.2015, 14:02:16 »

Подскажите как вывести модуль в модальном окне на сайте на Joomla3 / Bootstrap 3 через нажатие кнопки, чем подробней тем лучше !

Записан

aspidy

Завсегдатай
1008
55 / 1
Миграция joomla 1.0-1.5-2.5

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #1 : 16.03.2015, 14:09:53 »

Цитата: Fingros от 16.03.2015, 14:02:16

Подскажите как вывести модуль в модальном окне на сайте на Joomla3 / Bootstrap 3 через нажатие кнопки, чем подробней тем лучше !

http://bootstrap-ru.com/javascript.php#modals

Записан

Мелкий ремонт. skype poisk-plus

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #2 : 16.03.2015, 15:09:20 »

спасибо, произвел следующие действия, но кнопка все еще не работает !

1)подключена библиотека
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js
2)подключен Bootstrap
<link rel="stylesheet" href="/plugins/system/helix/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/plugins/system/helix/css/bootstrap-responsive.min.css" type="text/css" />
3)создан модуль modal_1
<div id="modal_1" class="modal hide">
   <div class="modal-header">
      <h2>Lorem Ipsum</h2>
   </div>
   <div class="modal-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat sem ipsum, ut faucibus nulla.
      Nullam mattis volutpat dolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque mollis, nibh
      tortor semper elit, eget rutrum purus nulla id quam.</p>
   </div>
</div>
3) в материале добавлена кнопка:
<li><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal_1">Click Me</a></li>

Записан

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #3 : 16.03.2015, 15:13:03 »

написано, что
"Активируйте модальный элемент без использования JavaScript. Установите data-toggle="modal" в элемент контроллера, как кнопку, вместе с data-target="#foo" или href="#foo" чтобы указать на конкретный модальный элемент для переключения."
-что я и сделал, но возможно нужно добавить js скрипт:

$('document').ready(function(){
$('#modal').modal();
});

не понятно куда конкретно его добавить...

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #4 : 16.03.2015, 15:19:48 »

Цитата: Fingros от 16.03.2015, 15:09:20

1)подключена библиотека
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js

Это вам не нужно, зато вам нужно подключить js от bs, скорее всего он лежит там: /plugins/system/helix/js/bootstrap.min.js

Записан

Личка | Вкусняшки

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #5 : 16.03.2015, 15:25:20 »

есть, подключен
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>

кнопка не работает(

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #6 : 16.03.2015, 15:26:37 »

Это не тот файл, вы подключаете bs2, а вам нужен bs3

Записан

Личка | Вкусняшки

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #7 : 16.03.2015, 15:34:18 »

есть такой, добавил
<script src="/plugins/system/helix/js/bootstrap.min.js" type="text/javascript"></script>
до </head>

не работает

Записан

aspidy

Завсегдатай
1008
55 / 1
Миграция joomla 1.0-1.5-2.5

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #8 : 16.03.2015, 15:37:27 »

1 Инициировать bootstrap JHtml::_('bootstrap.framework');
2 Подключить вывод модального окна JHtml::_('bootstrap.modal');
3 Окно запускается js примерно так
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('[rel=modal]').modal();
});
</script>
4 Пишите в дивах само окно (пример в ссылке, которую я дал выше)

Записан

Мелкий ремонт. skype poisk-plus

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #9 : 16.03.2015, 15:50:40 »

код подключения
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('[rel=modal]').modal();
});
</script>

нужно добавить в index.php?

Записан

aspidy

Завсегдатай
1008
55 / 1
Миграция joomla 1.0-1.5-2.5

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #10 : 16.03.2015, 16:01:22 »

Я же не знаю, что и как вы выводите. Если в шаблоне, то да в индексе. Подключение:
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
JHtml::_('bootstrap.framework');
JHtml::_('bootstrap.modal');
?>

Записан

Мелкий ремонт. skype poisk-plus

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #11 : 16.03.2015, 16:03:55 »

Он перепутал все версии bs, они между собой конфликтуют, надо убрать все подключения bs ядра

Записан

Личка | Вкусняшки

aspidy

Завсегдатай
1008
55 / 1
Миграция joomla 1.0-1.5-2.5

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #12 : 16.03.2015, 16:12:37 »

Цитата: AlekVolsk от 16.03.2015, 16:03:55

Он перепутал все версии bs, они между собой конфликтуют, надо убрать все подключения bs ядра

Все подключения убрать, оставить только ядро

Записан

Мелкий ремонт. skype poisk-plus

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #13 : 16.03.2015, 16:16:39 »

JHtml::_('bootstrap.framework');
JHtml::_('bootstrap.modal');
Это убрать - он же подключает стили и js из helix, значид версия ядра вообще присутствовать не должна

Записан

Личка | Вкусняшки

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #14 : 16.03.2015, 16:17:22 »

Fingros, где вы это пытаетесь вывести? Код всего файла покажите

Записан

Личка | Вкусняшки

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #15 : 16.03.2015, 16:21:34 »

подключаю в шаблоне
вывожу в HTML модуле

Код

<p>[row]</p>
<p>[col class="span3"]</p>
<ul class="pricing-table basic">
<li class="plan-name">
<h3>Голосовое приветствие<img class="pricing-chart" src="images/maxima/pricing-table/icon1.png" alt="" /></h3>
</li>
<li class="plan-price clearfix">
<h3 class="plan-price-head pull-left">800 руб.</h3>
<span class="plan-price-content pull-right">выбор голоса, формат для атс, 45 секунд</span></li>
<li><font color="dfdfe0"><i class="fa fa-file-text-o fa-lg"></i>  Уникальный сценарий</font></li>
<li><font color="dfdfe0"><i class="fa fa-language fa-lg"></i>  Перевод с иностранного</font></li>
<li><font color="dfdfe0"><i class="fa fa-server fa-lg"></i>  Синхронизация звуковой дорожки с видеорядом</font></li>
<li><font color="dfdfe0"><i class="fa fa-music fa-lg"></i>  Музыкальное и звуковое оформление</font></li>
<li><i class="fa fa-microphone fa-lg"></i>  Дикторская озвучка</li>
<li><i class="fa fa-magic fa-lg"></i>  Динамическая обработка </li>
<li><i class="fa fa-file-audio-o fa-lg"></i>  Конвертация в нужный формат </li>
<li class="plan-signup"><center><a href="zakaz-video" target="_blank" class="btn btn-default btn-large">ЗАКАЗАТЬ</a>
<li><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal_1">ПРИМЕРЫ</a>
</li>
<p>[/col]</p>
<p>[/row]</p>

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #16 : 16.03.2015, 16:27:04 »

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal_1">ПРИМЕРЫ</a>
Открываете тег <button>, а закрываете <a>, что-то одно, определитесь

Что подключаете в шаблоне, покажите, и что при этом выводится в head во фронте, тоже покажите.

Записан

Личка | Вкусняшки

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #17 : 16.03.2015, 16:32:46 »

Код

<?php
    /**
    * @package Helix Framework
    * Template Name - Shaper Minima
    * Template Version 1.1
    * @copyright Copyright (c) 2010 - 2013 JoomShaper
    * @license Copyrighted Commercial Licensed
    */
    //no direct accees
    defined ('_JEXEC') or die ('resticted aceess');   

?><!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"  lang="<?php echo $this->language; ?>"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"  lang="<?php echo $this->language; ?>"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"  lang="<?php echo $this->language; ?>"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="<?php echo $this->language; ?>"> <!--<![endif]-->
    <head>
<link href='http://fonts.googleapis.com/css?family=Arimo:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <?php
            if((bool) $this->helix->Param('loadjquery',0)==true ){
                $this->helix->addJQuery((bool)$this->helix->Param('loadfromcdn',0), true);
            }
        ?>
        <jdoc:include type="head" />
        <?php
            $this->helix->Header()
            ->addJS('helix.core.js') //core jsvascript file
            ->addJS('retina.js') //retina support file
            ->addJS('fixed-menu.js') //fixed menu
            ->addCSS('animate.css')
            ->setLessVariables(array(

                    'preset'=>$this->helix->Preset(),
                    'bg_color'=> $this->helix->PresetParam('_bg'),
          'text_color'=> $this->helix->PresetParam('_text'),
                    'link_color'=> $this->helix->PresetParam('_link')
                ))
            ->addLess('master', 'template')
            ->addLess( 'presets',  'presets/'.$this->helix->Preset() );
        ?>
<link href="universal_video_player.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="js/universal_video_player.js" type="text/javascript"></script>
<script src="js/screenfull.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.touchSwipe.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="/plugins/system/helix/js/bootstrap.min.js" type="text/javascript"></script>
    </head>
    <body <?php echo $this->helix->bodyClass('bg hfeed clearfix'); ?>>
    <div class="body-innerwrapper">
      
      <?php
        $this->helix->layout();
        $this->helix->Footer();
      ?>
      <jdoc:include type="modules" name="debug" />
    </div>
	<script>
		jQuery(function() {

			jQuery('#universal_video_player_default').universal_video_player({
				skin: 'blackControllers',
				width:980,
				height:424,
				responsive:true,
				borderColor: '',
				controlsBgFullScreenColor:'#FFFFFF',
				showSearch:false,
				showPlaylistBut:false,
				showLogo:false,
				autoPlayFirstVideo:false,
				selectedCategBg:'#FFFFFF',
				
				origThumbImgW:240,
				origThumbImgH:128,
				playlistRecordHeight:128,
				playlistRecordPadding:0,
				playlistWidth: 240,
				absUrl:'',
				
				showPlaylistOnInit:true,
				playlistRecordShowImg:true,
				playlistRecordShowTitle:false,
				playlistRecordShowDesc:false,
				
				playlistBgColor:'#FFFFFF',
				playlistRecordBgOffColor:'',
				playlistRecordBgOnColor:'',
				playlistRecordBgOffImgOpacity:50,
				playlistRecordBgOnImgOpacity:100,
								
				topTitleColor:'#333333',
				timerColor:'#333333',
				
				categoryRecordTextOffColor:'#4c4c4c',
				categoryRecordTextOnColor:'#FFFFFF',
				
				selectedCategOffColor: '#333333',
				selectedCategOnColor: '#00b4f9',
				
				searchInputBg:'#333333',
				searchInputBorderColor:'#f2f2f2',
				searchInputTextColor:'#ffffff'
				
			});		
			
			
		});
		

	</script>
	<!-- BEGIN JIVOSITE CODE {literal} -->
<script type='text/javascript'>
(function(){ var widget_id = 'nxQpAJSoXs';
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);})();</script>
<!-- {/literal} END JIVOSITE CODE -->
    </body>
</html>

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #18 : 16.03.2015, 16:38:20 »

ссылку на сайт?

Записан

Личка | Вкусняшки

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #19 : 16.03.2015, 16:43:41 »

отправил в личку

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #20 : 16.03.2015, 16:49:19 »

вот у вас скрипты, подключенные системой и фреймворком:
  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
  <script src="/plugins/system/helix/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="/plugins/system/helix/js/modernizr-2.6.2.min.js" type="text/javascript"></script>
  <script src="/plugins/system/helix/js/helix.core.js" type="text/javascript"></script>
  <script src="/plugins/system/helix/js/menu.js" type="text/javascript"></script>
  <script src="/templates/shaper_maxima/js/retina.js" type="text/javascript"></script>
  <script src="/templates/shaper_maxima/js/fixed-menu.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script src="/modules/mod_sptab/assets/js/sptab.js" type="text/javascript"></script>

и скрипты, подключаемые вами:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="/js/universal_video_player.js" type="text/javascript"></script>
<script src="/js/screenfull.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.touchSwipe.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="/plugins/system/helix/js/bootstrap.min.js" type="text/javascript"></script>

Как минимум, из выделенного жирным что-то одно из каждого блока надо убрать, лучше всего - выделенное цветом, иначе работать не будет - конфликт на лицо.
Ссылку можно было и сюда, ничего тайного в этом нет.

Записан

Личка | Вкусняшки

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #21 : 16.03.2015, 16:53:31 »

И еще: кнопка-ссылка на модальное окошко есть, а самого модального окошка на странице нет =)

Записан

Личка | Вкусняшки

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #22 : 16.03.2015, 16:57:06 »

подключаемые мной удалил, а где убрать скрипты, подключенные системой и фреймворком?

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #23 : 16.03.2015, 16:59:15 »

Ищите, в каких расширениях они подключаются, комментируйте соответствующую строчку подключения (будет что-то вроде JHtml::_('bootstrap.framework'); ) - это беда в J3, когда подключение фреймворка, используемого в админке, происходит и во фронте также, с этим постоянно бороться придется.

Записан

Личка | Вкусняшки

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #24 : 16.03.2015, 17:19:33 »

1) спасибо, кажется есть идея где может подключаться,
2) если мне нужно в модальном окне показать модуль - у меня это "playlist_1"
2.1) мне нужно создать HTML модуль с назв. у меня это "modal_1"
2.2) добавить код отображения этого модуля
2.3) добавить кнопку в материал <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal_1">ПРИМЕРЫ</a>

правильно?
и как пописать п.2.2 ?

спасибо за терпение...

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #25 : 16.03.2015, 17:22:15 »

Модуль HTML? тогда лучше объединить модули в один, и ссылаться в кнопке на playlist_1
Либо, если модуль уникальный, в html-модуле, где кнопка, выводите: {loadmodule mod_название}
Также поищите на форуме, можно было как-то выводить модуль по его id

Записан

Личка | Вкусняшки

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #26 : 16.03.2015, 17:24:47 »

Цитата: Fingros от 16.03.2015, 17:19:33

спасибо за терпение...

оно дорогого стоит ))

Записан

Личка | Вкусняшки

Fingros

Захожу иногда
61
1 / 0

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #27 : 16.03.2015, 17:31:16 »

если модуль уникальный значит правильно будет

Код

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="{loadmodule mod_playlist_1}">ПРИМЕРЫ</a>

на сколько дорого?

« Последнее редактирование: 16.03.2015, 17:40:34 от Fingros »

Записан

AlekVolsk

Гуру
6913
416 / 4

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #28 : 16.03.2015, 18:20:01 »

Цитата: Fingros от 16.03.2015, 17:31:16

если модуль уникальный значит правильно будет
Код
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="{loadmodule mod_playlist_1}">ПРИМЕРЫ</a>

Нет, не совсем так. mod_название - это системное имя модуля, например mod_custom, но если у вас несколько html-модулей, выведется тот, что стоит первым при сортировке по порядку (в списке модулей - первая колонка).

Цитата: Fingros от 16.03.2015, 17:31:16

на сколько дорого?

Это была метафора, если бы речь шла о реальном бюджете, я бы пригласил вас в скайп для дальнейшего обсуждения вопроса.

Записан

Личка | Вкусняшки

aspidy

Завсегдатай
1008
55 / 1
Миграция joomla 1.0-1.5-2.5

Re: Как вывести модуль в модальном окне - Joomla3 / Bootstrap?

« Ответ #29 : 17.03.2015, 05:21:17 »

Цитировать

Ищите, в каких расширениях они подключаются, комментируйте соответствующую строчку подключения (будет что-то вроде JHtml::_('bootstrap.framework'); ) - это беда в J3, когда подключение фреймворка, используемого в админке, происходит и во фронте также, с этим постоянно бороться придется.

Поэтому я и говорил, что лучше оставлять подключение в ядре, а все сторонние отключать.

Записан

Мелкий ремонт. skype poisk-plus

Вывести дочерние товары в самой карточке родительского товар VirtueMart Автор aliallaxverdiev91	Ответов: 2 Просмотров: 2726	03.03.2024, 11:32:49 от gtiosx
Как вывести Alt картинки в описание Lightbox? Автор art22	Ответов: 2 Просмотров: 2663	14.05.2023, 09:21:39 от sivers
Модуль вывода похожих материалов с картинками Автор Besa	Ответов: 3 Просмотров: 3400	20.04.2023, 20:25:50 от beliyadm
Не подлючает модуль из шаблона Автор misteri27	Ответов: 0 Просмотров: 1920	31.01.2023, 12:58:05 от misteri27
Через модуль html надо вставить три изображения в одну линию (горизонтально) Автор dionisimuss	Ответов: 10 Просмотров: 1523	21.12.2022, 20:59:52 от dionisimuss

SW JProjects v.2.6.0 - компонент каталога расширений для Joomla

Phoca Collapse System Plugin

Человек на GitHub ускорил Joomla в 600 раз на объёме 150к+ материалов в 1700+ категориях

Похожие темы