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

  • 48 Ответов
  • 5115 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Fingros

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



*

aspidy

  • Живу я здесь
  • ******
  • 1022
  • 54
  • Миграция joomla 1.0-1.5-2.5
Подскажите как вывести модуль в модальном окне на сайте на Joomla3 / Bootstrap 3 через нажатие кнопки, чем подробней тем лучше  !

http://bootstrap-ru.com/javascript.php#modals
Мелкий ремонт. skype poisk-plus

*

Fingros

  • Осваиваюсь на форуме
  • ***
  • 59
  • 1
спасибо, произвел следующие действия, но кнопка все еще не работает  !

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

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

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

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

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
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

  • Осваиваюсь на форуме
  • ***
  • 59
  • 1
есть, подключен
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>

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

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
Это не тот файл, вы подключаете bs2, а вам нужен bs3

*

Fingros

  • Осваиваюсь на форуме
  • ***
  • 59
  • 1
есть такой, добавил
<script src="/plugins/system/helix/js/bootstrap.min.js" type="text/javascript"></script>
до </head>

не работает

*

aspidy

  • Живу я здесь
  • ******
  • 1022
  • 54
  • Миграция joomla 1.0-1.5-2.5
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

  • Осваиваюсь на форуме
  • ***
  • 59
  • 1
код подключения
<script type="text/javascript">
 jQuery(document).ready(function() {
 jQuery('[rel=modal]').modal();
 });
</script>

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

*

aspidy

  • Живу я здесь
  • ******
  • 1022
  • 54
  • Миграция joomla 1.0-1.5-2.5
Я же не знаю, что и как вы выводите. Если в шаблоне, то да в индексе. Подключение:
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
JHtml::_('bootstrap.framework');
JHtml::_('bootstrap.modal');
 ?>
Мелкий ремонт. skype poisk-plus

*

AlekVolsk

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

*

aspidy

  • Живу я здесь
  • ******
  • 1022
  • 54
  • Миграция joomla 1.0-1.5-2.5
Он перепутал все версии bs, они между собой конфликтуют, надо убрать все подключения bs ядра
Все подключения убрать, оставить только ядро
Мелкий ремонт. skype poisk-plus

*

AlekVolsk

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

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
Fingros, где вы это пытаетесь вывести? Код всего файла покажите

*

Fingros

  • Осваиваюсь на форуме
  • ***
  • 59
  • 1
подключаю в шаблоне
вывожу в 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

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

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

*

Fingros

  • Осваиваюсь на форуме
  • ***
  • 59
  • 1
Код
<?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

  • Профи
  • ********
  • 6301
  • 336
ссылку на сайт?

*

Fingros

  • Осваиваюсь на форуме
  • ***
  • 59
  • 1
отправил в личку

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
вот у вас скрипты,  подключенные системой и фреймворком:
  <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

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

*

Fingros

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

*

AlekVolsk

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

*

Fingros

  • Осваиваюсь на форуме
  • ***
  • 59
  • 1
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

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

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
спасибо за терпение...
оно дорогого стоит ))

*

Fingros

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

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

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
если модуль уникальный значит правильно будет
Код
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="{loadmodule mod_playlist_1}">ПРИМЕРЫ</a>
Нет, не совсем так. mod_название - это системное имя модуля, например mod_custom, но если у вас несколько html-модулей, выведется тот, что стоит первым при сортировке по порядку (в списке модулей - первая колонка).


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

*

aspidy

  • Живу я здесь
  • ******
  • 1022
  • 54
  • Миграция joomla 1.0-1.5-2.5
Цитировать
Ищите, в каких расширениях они подключаются, комментируйте соответствующую строчку подключения (будет что-то вроде JHtml::_('bootstrap.framework'); ) - это беда в J3, когда подключение фреймворка,  используемого в админке, происходит и во фронте также, с этим постоянно бороться придется.
Поэтому я и говорил, что лучше оставлять подключение в ядре, а все сторонние отключать.
Мелкий ремонт. skype poisk-plus