Форум русской поддержки Joomla!® CMS
08.12.2016, 08:08:15 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 3803 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Fingros
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 57



« : 16.03.2015, 15:02:16 »

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


Записан
aspidy
Живу я здесь
******

Репутация: +55/-1
Offline Offline

Пол: Мужской
Сообщений: 1072


Миграция joomla 1.0-1.5-2.5


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

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

http://bootstrap-ru.com/javascript.php#modals
Записан
Fingros
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 57



« Ответ #2 : 16.03.2015, 16: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
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 57



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

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

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

не понятно куда конкретно его добавить...
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

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

Репутация: +1/-0
Offline Offline

Сообщений: 57



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

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

кнопка не работает(
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

Это не тот файл, вы подключаете bs2, а вам нужен bs3
Записан
Fingros
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 57



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

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

не работает
Записан
aspidy
Живу я здесь
******

Репутация: +55/-1
Offline Offline

Пол: Мужской
Сообщений: 1072


Миграция joomla 1.0-1.5-2.5


« Ответ #8 : 16.03.2015, 16: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 Пишите в дивах само окно (пример в ссылке, которую я дал выше)
Записан
Fingros
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 57



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

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

нужно добавить в index.php?
Записан
aspidy
Живу я здесь
******

Репутация: +55/-1
Offline Offline

Пол: Мужской
Сообщений: 1072


Миграция joomla 1.0-1.5-2.5


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

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

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

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

Репутация: +55/-1
Offline Offline

Пол: Мужской
Сообщений: 1072


Миграция joomla 1.0-1.5-2.5


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

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

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

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

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

Fingros, где вы это пытаетесь вывести? Код всего файла покажите
Записан
Fingros
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 57



« Ответ #15 : 16.03.2015, 17: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
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

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

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

Репутация: +1/-0
Offline Offline

Сообщений: 57



« Ответ #17 : 16.03.2015, 17: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
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

ссылку на сайт?
Записан
Fingros
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 57



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

отправил в личку
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



« Ответ #20 : 16.03.2015, 17: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
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

И еще: кнопка-ссылка на модальное окошко есть, а самого модального окошка на странице нет =)
Записан
Fingros
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 57



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

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

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

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

Репутация: +1/-0
Offline Offline

Сообщений: 57



« Ответ #24 : 16.03.2015, 18: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
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

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

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

спасибо за терпение...
оно дорогого стоит ))
Записан
Fingros
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 57



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

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

на сколько дорого?
« Последнее редактирование: 16.03.2015, 18:40:34 от Fingros » Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



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

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


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

Репутация: +55/-1
Offline Offline

Пол: Мужской
Сообщений: 1072


Миграция joomla 1.0-1.5-2.5


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

Цитировать
Ищите, в каких расширениях они подключаются, комментируйте соответствующую строчку подключения (будет что-то вроде JHtml::_('bootstrap.framework'); ) - это беда в J3, когда подключение фреймворка,  используемого в админке, происходит и во фронте также, с этим постоянно бороться придется.
Поэтому я и говорил, что лучше оставлять подключение в ядре, а все сторонние отключать.
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet