Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.05.2014, 14:31
Новичок на форуме
Отправить личное сообщение для pleymo Посмотреть профиль Найти все сообщения от pleymo
 
Регистрация: 27.05.2014
Сообщений: 6

Всплывающее окно / Позиционирование
День добрый

Проблема с всплывающим окном, скрипт и стили писал не я, были взяты с сайта скрипта, отцентровал в стилях под сайт, чтобы тенью закрывало только страницу, потом взглянул на другом мониторе, там перекос, собственно если менять окно браузера в ширину и высоту, то фрейм с тенью также меняют свое месторасположения, можно ли как-то устаканить фрейм стоять на одном месте, в мой случае в пределах страницы?

Страница сайта со скриптом, при нажатии на участника со стрелкой открывается описание

http://artframeexpo.ru/?page_id=90

Код скрипта:

// Defining our jQuery plugin
$.fn.paulund_modal_box = function(prop){
// Default parameters
var options = $.extend({
height : "250",
width : "500",
title:"JQuery Modal Box Demo",
description: "Example of how to create a modal box.",
top: "140px",
left: "168px",
},prop);
//Click event on element
return this.click(function(e){
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
});
/**
* Add styles to the html markup
*/
function add_styles(){
$('.paulund_modal_box').css({
'position':'absolute',
'left':options.left,
'top':options.top,
'display':'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border':'1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px',
'background': '#cccccc',
'z-index':'50',
});
$('.paulund_modal_close').css({
'position':'relative',
'top':'-10px',
'left':'27px',
'float':'right',
'display':'block',
'height':'50px',
'width':'50px',
    'background': 'url([url]http://artindustry.ru/expo/closebox.png[/url]) no-repeat',
});
/*Block page overlay*/
var pageHeight = $(window).height();
var pageWidth = $(window).width();
$('.paulund_block_page').css({
'position':'absolute',
'top':'270px',
'left':'544px',
'background-color':'rgba(0,0,0,0.6)',
'height': '1030px',
'width': '1038px',
'z-index':'1'
});
$('.paulund_inner_modal_box').css({
'background-color':'#F7FDFA',
'height':(options.height - 50) + 'px',
'width':(options.width - 50) + 'px',
'padding':'10px',
'margin':'15px',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px'
});
}
/**
* Create the block page div
*/
function add_block_page(){
var block_page = $('<div class="paulund_block_page"></div>');
$(block_page).appendTo('body');
}
/**
* Creates the modal box
*/
function add_popup_box(){
var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
$(pop_up).appendTo('.paulund_block_page');
$('.paulund_modal_close').click(function(){
$(this).parent().fadeOut().remove();
$('.paulund_block_page').fadeOut().remove();
});
}
return this;
};

$('.paulund_modal_1').paulund_modal_box({
    title:'<span style="margin-left:20px; margin-right:20px; text-decoration: underline; color: #A81F1A">«Imex»</span>',
    description:'<p style="margin-left:20px; margin-right:20px; margin-top: 40px;"><strong>Описание:</strong></p><p style="text-align: justify; margin-left:20px; margin-right:20px;">Imex is one of European largest mouldings producer and foremost supplier to the framing industry. We produce mouldings both in wood and in MDF. Our customers are all manufacturers, producers of framed products.</p>',
height: '300',
width: '700'
});
    
$('.paulund_modal_2').paulund_modal_box({
    title:'<span style="margin-left:20px; margin-right:20px; text-decoration: underline; color: #A81F1A">«Арт-Профиль»</span>',
    description:'<p style="margin-left:20px; margin-right:20px; margin-top: 40px;"><strong>Описание:</strong></p><p style="text-align: justify; margin-left:20px; margin-right:20px;">Компания «Арт-Профиль» была создана на базе компании «Богемия-Белгород», которая ведет свою историю от первой багетной мастерской города.<br></br>Сегодня компания «Арт-Профиль» поставляет на Российский рынок товары для артиндустрии, пластиковый багет израильского, корейского и литовского производства, высококачественный паспарту производства компании <b>«Royal Moorman Karton»</b> (Голландия), различную фурнитуру для производства багетных рам и фоторамок. В коллекции багета представлены образцы разных стилей от классики до модерна.<br></br>За время работы компания «Арт-Профиль» зарекомендовала себя, как надежный партнер, поставляющий качественную продукцию в широком ассортименте и по разумным ценам. Мы осуществляем поставки оптом в различные регионы страны, постоянным клиентам предоставляем особые условия и гибкую систему скидок.</p>',
height: '560',
width: '700'
});    
    
$('.paulund_modal_3').paulund_modal_box({
    title:'<span style="margin-left:20px; margin-right:20px; text-decoration: underline; color: #A81F1A">«Артэ»</span>',
    description:'<p style="margin-left:20px; margin-right:20px; margin-top: 40px;"><strong>Описание:</strong></p><p style="text-align: justify; margin-left:20px; margin-right:20px;">Оптовая продажа и производство художественной продукции и багета.</p>',
height: '250',
width: '700'
});     
  
$('.paulund_modal_4').paulund_modal_box({
    title:'<span style="margin-left:20px; margin-right:20px; text-decoration: underline; color: #A81F1A">«Дизайн-Интер-Трейд»</span>',
    description:'<p style="margin-left:20px; margin-right:20px; margin-top: 40px;"><strong>Описание:</strong></p><p style="text-align: justify; margin-left:20px; margin-right:20px;">Компания «Дизайн-Интер-Трейд» занимается оптовыми поставками рамного и интерьерного багета, картона для паспарту и оборудования для багетных мастерских, производством овальных рам и подрамника. Работает на рынке России с 1998 года. Имеет собственную сеть региональных складов - Тольятти, Санкт-Петербург, Екатеринбург, Кемерово, Пермь, Минск.</p>',
height: '350',
width: '700'
});      

$('.paulund_modal_5').paulund_modal_box({
    title:'<span style="margin-left:20px; margin-right:20px; text-decoration: underline; color: #A81F1A">«Галеон-Трейд»</span>',
    description:'<p style="margin-left:20px; margin-right:20px; margin-top: 40px;"><strong>Описание:</strong></p><p style="text-align: justify; margin-left:20px; margin-right:20px;">Оптовая и розничная продажа багета, фурнитуры, оборудования для производства картин и фоторамок. Продажа картин и фоторамок.</p>',
height: '280',
width: '700'
}); 

$('.paulund_modal_6').paulund_modal_box({
    title:'<span style="margin-left:20px; margin-right:20px; text-decoration: underline; color: #A81F1A">«Интерквадрум»</span>',
    description:'<p style="margin-left:20px; margin-right:20px; margin-top: 40px;"><strong>Описание:</strong></p><p style="text-align: justify; margin-left:20px; margin-right:20px;">Компания InterQuadrum первой в России организовала производство художественного багета из хвойных пород дерева. Конечная отделка с использованием самых современных итальянских технологий, оборудования и материалов осуществляется в ближнем Подмосковье. Качество багета подтверждается признанием зарубежных коллег из Европы, которые в 2004 году приянли InterQuadrum в ряды профессиональной организации европейских производителей багета EMMA.<br></br>Помимо производства собственного багета компания занимается импортом из Италии, Испании и Чехии.</p>',
height: '470',
width: '700'
}); 
    
$('.paulund_modal_7').paulund_modal_box({
    title:'<span style="margin-left:20px; margin-right:20px; text-decoration: underline; color: #A81F1A">«Ramastudio»</span>',
    description:'<p style="margin-left:20px; margin-right:20px; margin-top: 40px;"><strong>Описание:</strong></p><p style="text-align: justify; margin-left:20px; margin-right:20px;">Багетная мастерская, дизайн и изготовление рам, изготовление копий рам, изготовление овальных и круглых рам, реставрация рам, продажа испанского багета оптом и в розницу.</p>',
height: '300',
width: '700'
}); 

    
$('.paulund_modal_8').paulund_modal_box({
    title:'<span style="margin-left:20px; margin-right:20px; text-decoration: underline; color: #A81F1A">«Bures Art»</span>',
    description:'<p style="margin-left:20px; margin-right:20px; margin-top: 40px;"><strong>Описание:</strong></p><p style="text-align: justify; margin-left:20px; margin-right:20px;">Продажа и репродукция картин.</p>',
height: '250',
width: '700'
});
Ответить с цитированием
  #2 (permalink)  
Старый 01.06.2014, 13:35
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

вот простой вариант с примерами, доками https://github.com/cyberua/modalJS
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 03.06.2014, 14:50
Новичок на форуме
Отправить личное сообщение для pleymo Посмотреть профиль Найти все сообщения от pleymo
 
Регистрация: 27.05.2014
Сообщений: 6

у меня несколько модальных окон, этот скрипт не подходит
Ответить с цитированием
  #4 (permalink)  
Старый 03.06.2014, 18:10
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от pleymo
у меня несколько модальных окон, этот скрипт не подходит
да хоть 10 000 http://jsfiddle.net/8evMH/7/

https://github.com/cyberua/modalJS/w...etwindowwindow
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающее окно Rooner jQuery 1 23.04.2014 13:15
Оригинальное всплывающее окно Yurec Events/DOM/Window 3 17.03.2014 14:38
Ячейка как ссылка (всплывающее окно на jquery)? Алекс-ми Javascript под браузер 0 17.05.2013 18:58
Пропадает меню при переводе курсора на всплывающее окно Adept_90 Элементы интерфейса 14 10.07.2012 21:34
Всплывающее окно - надо задать границы Anton-CS Элементы интерфейса 0 18.07.2011 10:55