[Помогите] Modal окно в opencart

Alexandr · 15 янв 2013

Вообще не дружу с js. Поэтому и спрашиваю у вас.
Объясните, что мне нужно подгрузить на страницу, чтобы при клике на ссылку вылетало окно, например, с картой yandex?

alex_storm · 15 янв 2013

Так что ли? http://mixmebli.com.ua/ - просмотреть на карте кликни.

Alexandr · 15 янв 2013

Да. именно.

alex_storm · 15 янв 2013

Код в <body>

Спойлер

Код:

<a href="#win1" id="win_pop">Ссылка по клику</a>
		<a href="#x" class="overlay" id="win1"></a>
		  <div class="popup">
				<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->
				<div id="ymaps-map-id_135713132654830483127" style="width: 450px; height: 350px;"></div>
				<script type="text/javascript">function fid_135713132654830483127(ymaps) {var map = new ymaps.Map("ymaps-map-id_135713132654830483127", {center: [36.307346507934504, 49.9733888380376], zoom: 16, type: "yandex#map"});map.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));map.geoObjects.add(new ymaps.Placemark([36.307604, 49.9726], {balloonContent: 'MixMebel - магазин мебели.<br/>2 этаж<br/>Sunsity"Premnium"'}, {preset: "twirl#lightblueDotIcon"}));};</script>
				<script type="text/javascript" src="http://api-maps.yandex.ru/2.0-stable/?lang=ru-RU&coordorder=longlat&load=package.full&wizard=constructor&onload=fid_135713132654830483127"></script>
				<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->
			<a class="close"title="Закрыть" href="#close"></a>
		</div>

Стили CSS

Спойлер

Код:

/* Базовые стили модального окна  */
.overlay {
	background-color: rgba(0, 0, 0, 0.7);
	bottom: 0;
	cursor: default;
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	visibility: hidden;
	z-index: 1;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}
.overlay:target {
	visibility: visible;
	opacity: 1;
}
.popup img{
	display: inline;
	border: none;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #ffffff;   
}
.popup {
	background-color: #fff;
	border: 3px solid #fff;
	display: inline-block;
	left: 50%;
	opacity: 0;
	padding: 15px;
	position: fixed;
	text-align: justify;
	font: 14px Helvetica, Arial, Sans-Serif;
	top: 40%;
	visibility: hidden;
	z-index: 10;
 
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
 
	-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
	-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
	-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
	-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
	box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
 
	-webkit-transition: opacity .5s, top .5s;
	-moz-transition: opacity .5s, top .5s;
	-ms-transition: opacity .5s, top .5s;
	-o-transition: opacity .5s, top .5s;
	transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
	top: 50%;
	opacity: 1;
	visibility: visible;
}
/* Кнопка закрытия окна  */
.close {
	background-color: rgba(0, 0, 0, 0.8);
	border: 2px solid #ccc;
	height: 24px;
	line-height: 24px;
	position: absolute;
	right: -13px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	top: -15px;
	width: 24px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}
.close:before {
	color: rgba(255, 255, 255, 0.9);
	content: "X";
	font-size: 14px;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
	background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
	margin-bottom: 10px;
}

Не забываем ставить лайк )

alex_storm · 15 янв 2013

Alexandr сказал(а): ↑

Спасибо огромное (:
лойс поставил.
Нажмите, чтобы раскрыть...

Пожалуйста )

Да и кстати ) Хочу сказать сразу, вот к этот атрибут .close - он присвоен к стандартному модальному окну, которое вылетает при покупке товара. "в зеленой рамочке"

Так вот, этот атрибут собьет стандартные значение, для этого все модельное окно лежит в <div id="contakt"> и атрибут .close уже выглядит иначе #contakt .close

Alexandr · 16 янв 2013

alex_storm сказал(а): ↑

Пожалуйста ) Да и кстати ) Хочу сказать сразу, вот к этот атрибут .close - он присвоен к стандартному модальному окну, которое вылетает при покупке товара. "в зеленой рамочке" Так вот, этот атрибут собьет стандартные значение, для этого все модельное окно лежит в
и атрибут .close уже выглядит иначе #contakt .close
Нажмите, чтобы раскрыть...

Все бы хорошо, но как мне сделать так, что бы это окно открывалась там, где я нахожусь? Просто у нее присвоено #win1. И когда я нажму на ссылку, меня переносит, site.ru/#win1

alex_storm · 16 янв 2013

Давайте тогда используем Jquery.
Подключение скрипта Jquery. Вставляем этот код в catalog/view/ваша тема/template/common/header.tpl
между теками <head> </head>
Код:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
Запускаем скрипт при помощи. Этот код вставляем сразу после подключения JS
Спойлер
Код:
<script type="text/javascript">
$(document).ready(function() {
	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		var id = $(this).attr('href');
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		$('#mask').fadeIn(1000);
		$('#mask').fadeTo("slow",0.8);
		var winH = $(window).height();
		var winW = $(window).width();
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
		$(id).fadeIn(2000);
	});
	$('.window .close').click(function (e) {
		e.preventDefault();
		$('#mask, .window').hide();
	});
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});
});
</script>
Код HTML
Спойлер
Код:
<a href="#dialog" name="modal">Простое модальное окно</a>
<div id="boxes">
	<div id="dialog" class="window">
	Простое модальное окно <br>
	<span><a href="#" class="close"/>Закрыть его</a>
	</div>
	<div id="mask"></div>
</div>
Код CSS
Спойлер
Код:
a {color: #333; text-decoration: none; font-size: 25px;}
a:hover {color:#ccc; text-decoration:none}
#mask {
	position:absolute;
	left:0;
	top:0;
	z-index:9000;
	background-color:#000;
	display:none;
	font-family: Georgia;
	}
#boxes .window {
	position:absolute;
	left:0;
	top:0;
	width:440px;
	height:200px;
	display:none;
	z-index:9999;
	padding:20px;
	text-align: center;
	font-size: 25px;
	}
#boxes #dialog {
	width:375px;
	height:203px;
	padding:10px;
	background-color:#ffffff;
	}
.close {
	float: right;
	margin-top: 148px;
	}
Пример работы скрипта
--- добавлено: 16 янв 2013 в 08:41 ---
И вот еще модальные окна.
Тут уже как душе угодно, настраивайте и пользуйтесь!
http://arcticlab.ru/arcticmodal/

Alexandr · 16 янв 2013

В общем, когда пытаюсь подключить js. Сразу слетает слайдшоу продуктов lite.
Пытался пользоваться артикмодал

alex_storm · 16 янв 2013

Попробуйте без подключения <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
Т.к. на Вашем сайте уже есть jquery-1.7.1.min

Это чисто конфликт версий. Как справить с конфликтом читаем тут http://x3m-slider.org.ua/blog/conte...uery-tak-zhe-kak-sdelat-chto-yoxview-rabotal-

Toliamba · 28 янв 2013

Как одно из решений...

Модальное окно в статьях с информацией из внешней ссылке.
Пример действителен для версий оксторе 1.5.2.1 до 1.5.4.1

Открываем статью, нажимаем кнопку Источник и добавляем код с информацией
Код:
<aclass="colorbox"href="./index.php?route=information/information/info&amp;information_id=5">Информация</a>
<scripttype="text/javascript"></script>

Войти или зарегистрироваться

[Помогите] Modal окно в opencart

Alexandr

alex_storm webdev

Alexandr

alex_storm webdev

alex_storm webdev

Alexandr

alex_storm webdev

Alexandr

alex_storm webdev

Toliamba