Техническая поддержка сервиса Quadro.Boards

sadhaka

Просили как там, получилось немного ни как там, но зато проще

Скрипт позволяет создавать любые всплывающие окна с информацией, например, с информацией о персонаже.

Настройка:
//в хтмл-верх

Код:

<script src="http://forumstatic.ru/files/0011/e9/e1/56920.js" type="text/javascript"></script>

//в свой стиль или в хтмл-верх в тегах <style></style>

Код:

.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 100;
	display: none;
	top: 0;
	left: 0; 
	}
.reveal-modal {
	visibility: hidden;
	top: 100px; 
	left: 50%;
	margin-left: -300px;
	width: 520px;
	position: absolute;
	z-index: 101;
	padding: 30px 40px 34px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
	}
.reveal-modal.small     { width: 200px; margin-left: -140px;}
.reveal-modal.medium     { width: 400px; margin-left: -240px;}
.reveal-modal.large     { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge     { width: 800px; margin-left: -440px;}
	
.reveal-modal .close-reveal-modal {
	font-size: 22px;
	line-height: .5;
	position: absolute;
	top: 8px;
	right: 11px;
	color: #aaa;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	font-weight: bold;
	cursor: pointer;
        text-decoration: none;
}

На этом настройка самого скрипта завершена.

Настройка всплывающих окон:

Сюда вставляем информацию
//Лучше писать это в самый низ хтмл-низа

<div id="myModal" class="reveal-modal xlarge main container">
<h2>Всплывающее окно</h2>
<p>Это я, всплывающее окно</p>
<a class="close-reveal-modal">×</a>
</div>

где

myModal - уникальные идентификатор окна (у каждого окна должен быть свой идентификатор)
<h2>Всплывающее окно</h2> - Заголовок окна
<p>Это я, всплывающее окно</p> - Содержимое окна, куда можно вставлять любые хтмл-теги (не бб-коды).

Этот код ставим туда, где будет отображаться ссылка/кнопка, по клику на которую будет появляться всплывающее окно
//Например, в объявление или доп поле в профиле

<a href="#" data-reveal-id="myModal">Кликни на меня!</a>

Обратите внимание, что выделенный текст в ссылке должен полностью совпадать с id окна.

Всплывающих окон, может быть сколько угодно, как и ссылок на них, но у них у всех должны быть РАЗНЫЕ id.

Для продвинутых:

Есть возможность настройки размера окна, обратите внимание на стили и классы

.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}

выбираем нужный класс и заменяем его здесь

<div id="myModal" class="reveal-modal xlarge main container">

Теги: всплывающие окна

+2

sadhaka

Добавляем во всплывающее окно скрипт вкладок с информацией о персонаже:

1. Шаг 1. Создаем доп. поле, называем как хотим, запрещаем заполнять пользователям.
2. Шаг 2. Вставляем в поле вот такую ссылку

<a class="modal-link" href="#" data-reveal-id="myModal">Биография</a>

где,
myModal - меняем как описано выше;
Биография - тут что хотите;

3. Шаг 3. Устанавливаем скрипт вкладок

//в хтмл-низ
//проверьте, чтобы у Вас этот же скрипт не стоял в объявлении, может быть конфликт

Код:

<script type="text/javascript">
$(".modal-link").click(function() {
var winId = "#" + $(".modal-link").attr("data-reveal-id");
$(winId +".menu div.submenutext").hide();
$(winId +".menu span").removeClass("tabactive");
$(winId +".menu div.submenutext:first").show();
});
$(".menu span").click(function() {
    $(".menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $(this).parents(".menu").find("div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $(activeDiv).fadeIn();
    return false; 
});
</script>

//в стили или хтмл-верх в тегах <style>

Код:

<style>
.menu span {
    cursor: pointer;
    display: block;
    margin: 7px 0;
    padding: 11px;
    text-align: left;
    width: 150px;
}
.menu-links {
    float: left;
    margin-right: 15px;
}
#submenu {
    display: inline-block;
}
#submenu, .menu span {
        border-radius: 5px;
	background: #efeff0;
}
.menu .tabactive {
	color: #000000;
        background: #777777;
}
#submenu {
	padding: 7px;
	height: 180px;
	font-size: 12px;
	width: 595px;
}    
.submenutext {
	display: none; 
	height: 40px;
}
</style>

4. Шаг 4. Настраиваем вкладки

//пример настроенного окна с вкладками

<div id="myModal" class="reveal-modal xlarge main container">
<h2>Персонаж</h2>
<div class="menu">
<div class="menu-links">
<span alt="#sm11">Имя</span>
<span alt="#sm22">Биография</span>
<span alt="#sm33">Характер</span>
<span alt="#sm44">Внешность</span>
</div>
<div id="submenu">
<div id="sm11" class="submenutext" style="display:block;">
<br/><br/>
текст 1
</div>
   <div id="sm22" class="submenutext">
   <br /><br />
текст 2
</div>
   <div id="sm33" class="submenutext">
   <br /><br />
текст 3
</div>
   <div id="sm44" class="submenutext">
   <br /><br />
текст 4
</div>
</div>
   <a class="close-reveal-modal">×</a>
</div>
</div>

Желательно, чтобы выделенные значения, для каждого всплывающего окна были уникальны,
т.е. например,
для первого окна sm1,sm2,sm3,sm4 - для четырех вкладок
для второго окна sm11,sm22,sm33,sm44 - для четырех вкладок
и т.д.

Если скрипт будет востребован именно в таком виде, т.е. с вкладками, добавлю более простую установку.

+1

venik

крайне классная штука. но с вкладками беда - всем персонажам не поставишь. места много занимает, после сохранения окно html-низа лихо съедает скрипты, стоящие в начале. внезапно обнаружилось хх

Отредактировано venik (03.12.2013 04:12:35)

0

sadhaka

venik
Там похоже есть ограничение на размер.
Я могла бы подгружать данные из файла. Удобно было бы их заполнять, если бы пришлось редактировать файл? (например, txt, вроде как у нас в админку его можно загрузить).

0

venik

sadhaka
да, видимо)
тоже об этом подумал, как то со стороны подгружать данные. можно это как-то организовать в пределах одного форума, или с использованием сторонних ресурсов может?
надеюсь на вашу помощь, а то я в этом деле нуб чуть более, чем "полностью")

0

sadhaka

venik написал(а):

тоже об этом подумал, как то со стороны подгружать данные

Ну других-то, собственно, вариантов нет. Посмотрю, что можно сделать, но не уверена, что быстро.

0

venik

sadhaka
спасибо огромное за помощь)

0

sadhaka

Хм, появилась идея, как реализовать вкладки, чтобы не пришлось все писать в хтмл-низ, постараюсь сегодня реализовать.

0

sadhaka

итак, новый вариант всплывающих окошек с вкладками.

Установка скрипта:

Как и прежде - это в хтмл-верх

Код:

<script src="http://forumstatic.ru/files/0011/e9/e1/56920.js" type="text/javascript"></script>

Это в Свой стиль без тегов <style> или в хтмл-верх

Код:

<style>
.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 100;
	display: none;
	top: 0;
	left: 0; 
	}
.reveal-modal {
	visibility: hidden;
	top: 100px; 
	left: 50%;
	margin-left: -300px;
	width: 520px;
	position: absolute;
	z-index: 101;
	padding: 30px 40px 34px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
	}
.reveal-modal.small     { width: 200px; margin-left: -140px;}
.reveal-modal.medium     { width: 400px; margin-left: -240px;}
.reveal-modal.large     { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge     { width: 800px; margin-left: -440px;}
	
.reveal-modal .close-reveal-modal {
	font-size: 22px;
	line-height: .5;
	position: absolute;
	top: 8px;
	right: 11px;
	color: #aaa;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	font-weight: bold;
	cursor: pointer;
        text-decoration: none;
}
</style>
<style>
.menu span {
    cursor: pointer;
    display: block;
    margin: 7px 0;
    padding: 11px;
    text-align: left;
    width: 150px;
}
.menu-links {
    float: left;
    margin-right: 15px;
}
#submenu {
    display: inline-block;
}
#submenu, .menu span {
        border-radius: 5px;
	background: #efeff0;
}
.menu .tabactive {
	color: #000000;
        background: #777777;
}
#submenu {
	padding: 7px;
	height: 180px;
	font-size: 12px;
	width: 595px;
}    
.submenutext {
	display: none; 
	height: 40px;
}
</style>

Это в хтмл-низ

<div id="character" class="reveal-modal xlarge main container">
<div class='modal_wrap'></div>
<a class="close-reveal-modal">×</a>
</div>

<script type="text/javascript">
function showTab(elem){
$(".menu span").removeClass("tabactive");
$(elem).addClass("tabactive");
$("div.submenutext").hide();
var activeDiv = $(elem).attr("alt");
$("div."+activeDiv).fadeIn();
return false;
}
$(".modal-link").click(function() {
var modId = $(this).attr('id');
$('.modal_wrap').html('');
$.get('pages/'+modId, function (data){
$('.modal_wrap').html($(data).find('.character').html());
});
$(".submenutext").hide();
$(".submenutext:first").show();
});
</script>

Настройка скрипта:

Шаг 1. Создаем страницу
Администрирование - Страницы.
В поле "Название" пишем ник участника, которому будет соответствовать всплывающее окно, например, Садхака.
Запоминаем, что у нас выводится в поле "Адресное имя" - в моем случае, sadhaka. Нам еще это приходится.
В тело страницы вставляем такой код

Код:

<div class='character'> 
	<h2>Sadhaka</h2>
	<div class="menu">
    	<div class="menu-links">
        <span alt="#sm1" onclick='showTab(this);'>Имя</span>
        <span alt="#sm2" onclick='showTab(this);'>Биография</span>
        <span alt="#sm3" onclick='showTab(this);'>Характер</span>
        <span alt="#sm4" onclick='showTab(this);'>Внешность</span>
    	</div>
    </div>
    <div id="submenu">
	    <div id="sm1" class="submenutext" style="display:block;">
	        <br/><br/>
	        текст 1
	    </div>
	    <div id="sm2" class="submenutext">
	           <br /><br />
	        текст 2
	    </div>
	    <div id="sm3" class="submenutext">
	           <br /><br />
	        текст 3
	    </div>
	    <div id="sm4" class="submenutext">
	           <br /><br />
	        текст 4
	    </div>
    </div>
</div>

заполненное Вашей информацией.

Шаг 2.
Создаем дополнительное поле: Администрирование - Поля профиля.
Называем поле как хотим. Запрещаем заполнять пользователям.
Идем в профиль пользователя, которому мы только что создали страницу и вставляем в данное поле ссылку

<a id="sadhaka" class="modal-link" href="#" data-reveal-id="character">Биография</a>

Выделенное красным - это было у нас в шаге 1 "Адресное имя" страницы. Вписываем тоже самое, что и там. Это слово свяжет ссылку со страницей.
Выделенное зеленым - любой Ваш текст.

Все.

Создаем какое угодно количество страниц для какого угодно количества пользователей

+2

venik

sadhaka
ох, спасибо огромное *___* это прямо очень очень)))

0

venik

понять не могу где наворотил неправильно *_* снова на помощь надеюсь *__*
при клике на ник в доп. полях вылезает далеко не то, что нужно х__х

форум: http://doe.rusff.me/

0

sadhaka

venik
сорри, это не вы ошиблись, это я опечаталась, переустановите часть в хтмл-низ снова.

0

venik

sadhaka
нет, все так же(

0

sadhaka

venik
проверьте не ошиблись ли при написании ссылки

здесь точно в id нет кириллицы?

<a id="enay" class="modal-link" data-reveal-id="character" href="#">ИНАЙ ЭРОНДЕЙЛ, 36</a>

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

$.get('pages/'+modId, function (data){

на

$.get('http://doe.rusff.me/pages/'+modId, function (data){

0

venik

sadhaka написал(а):

здесь точно в id нет кириллицы?

точно нету, все на англ.

sadhaka написал(а):

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

все равно никак *__*

0

sadhaka

venik
Хм, очень странно. Значит какие-то скрипты конфликтуют.
Попробуйте пока убрать скрипт, который удаляет название поля.
Если дело в нем, я его потом перепишу

0

venik

sadhaka написал(а):

Хм, очень странно. Значит какие-то скрипты конфликтуют.
Попробуйте пока убрать скрипт, который удаляет название поля.
Если дело в нем, я его потом перепишу

да, дело было именно в нем *__* теперь работает *__*

0

sadhaka

venik
попробуйте убрать названия вот этим скриптом

<script type="text/javascript">
var A=[1,2,3,4,5]
$(".post .post-author li").each(function (){
for(var i=0; i<A.length;i++){if($(this).hasClass("pa-fld"+A[i])){
$(this).html($(this).html().replace(/^[^:]*:/,''));}};});
</script>

Красным номера Доп полей в которые убираем, можно удалить ненужные для удаления, последняя цифра без запятой

0

venik

sadhaka
увы, так тоже перестает работать всплывающее окно(

0

sadhaka

venik
Если поставить скрипт всплывающего окна после скрипта, который убирает названия, то все получится

+1

о форуме «Скрипты и дополнения» + навигация по скриптам	Скрипты и дополнения	08.11.2010
Вопросы и Запросы по Скриптам 2	Скрипты и дополнения	25.04.2014
Вопросы по оформлению форума, дизайну и css (4)	Оформление форумов	21.01.2016
Общие вопросы (6)	Поток сознания	12.04.2015
Общие вопросы (7)	Поток сознания	30.12.2015

Техническая поддержка сервиса Quadro.Boards

Меню навигации

Пользовательские ссылки

Объявление

Новости сервиса

О форуме

Полезные ссылки

Информация о пользователе

Всплывающие окна с информацией

Сообщений 1 страница 20 из 33

Поделиться124.11.2013 17:32:21

Поделиться224.11.2013 18:16:02

Поделиться303.12.2013 04:11:59

Поделиться403.12.2013 07:34:41

Поделиться503.12.2013 16:04:27

Поделиться603.12.2013 19:01:14

Поделиться703.12.2013 21:49:27

Поделиться808.12.2013 11:10:22

Поделиться908.12.2013 13:56:23

Поделиться1009.12.2013 01:36:16

Поделиться1109.12.2013 15:32:19

Поделиться1209.12.2013 15:48:38

Поделиться1309.12.2013 16:19:43

Поделиться1409.12.2013 16:39:05

Поделиться1509.12.2013 16:46:38

Поделиться1609.12.2013 17:10:40

Поделиться1709.12.2013 17:19:54

Поделиться1809.12.2013 17:41:08

Поделиться1909.12.2013 18:32:00

Поделиться2009.12.2013 19:36:58

Похожие темы