Как реализовать открытие формы по клику?

Question

[Dmmitry]

Здравствуйте!

Есть форма со смарт респондера

<!-- SmartResponder.ru PopOver code (begin) -->
<script language="javascript" type="text/javascript" src="popover.js"></script><div id="SR_PopOverModalBackground" style="display: none; background-color:#000; filter: alpha(opacity=0); height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; opacity: 0;"></div><span style="margin: 0; padding: 0; width: 260; height: 200; position: absolute; left: 0; right: 0; display: none;" id="SR_PopOver"><table cellspacing="0" cellpadding="0" width="260" height="200"><tr><td rowspan="2" colspan="2" width="253" height="193" style="border: 1px solid #0000cc"><table cellspacing="0" cellpadding="3" width="100%" height="100%" bgcolor="#ffffff">
<tr valign="middle" bgcolor="#0000ff"><td onMouseDown="popover_drag_start(event, this, 'SR_PopOver')" width="100%" align="left" style="font-family: Courier; font-size: 12pt; color: #ffffff; font-weight: bold;">Внимание!</td><td align="right"><table cellspacing="0"><tr><td style="padding: 0 3 0 3; background-color: #ff0000; font-family: Verdana; font-size: 10pt; color: #ffffff; font-weight: bold; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; border-bottom: 2px solid #696969; border-right: 2px solid #696969;" onClick="popover_slideClose('SR_PopOver', 'up', 200)" onMouseOver="this.style.cursor='pointer'" onMouseOut="this.style.cursor='default'">X</td></tr></table></td></tr><tr><td colspan="2" style="font-family: Verdana; font-size: 10pt; color: #000000;" align="center" valign="middle" height="100%">іаіваіваіва</td></tr></table></td><td width="7" height="7"></td></tr><tr><td bgcolor="#cccccc" height="186"></td></tr><tr><td width="7" height="7"></td><td width="246" bgcolor="#cccccc"></td><td bgcolor="#cccccc"></td></tr></table></span><script language="javascript" type="text/javascript">	function SR_startPopOver()	{	popover_set_margins(5, 5, 5, 5);popover_slide('SR_PopOver', 'centerUp', 'centerCenter', 200, 0, '#000000');}	function onloadFunction(){window.setTimeout(SR_startPopOver, 0);}window.onload = onloadFunction;document.body.onload = onloadFunction;document.onload = onloadFunction;</script>
<!-- SmartResponder.ru PopOver code (end) -->

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

Answer 1

[Евгений Петров]

Как сделать раскрывающийся липкий блок?

Comments

[Dmmitry]

@Petroveg эту часть поменять?
document.body.onload = onloadFunction

[Евгений Петров]

@likeapimp

$(function () {
	onloadFunction(); //А проще сразу код без создания функции
});

[Dmmitry]

@Petroveg это что? для моего примера или вашего?

[Евгений Петров]

@likeapimp вы меня запутали:) Давайте определимся, что ловить клик будем на элементе с атрибутом data-action="popover". Тогда

$(document).on('click', '[data-action="popover"]', SR_startPopOver);

А вот это выкиньте совсем и забудьте

function onloadFunction(){window.setTimeout(SR_startPopOver, 0);}window.onload = onloadFunction;document.body.onload = onloadFunction;document.onload = onloadFunction;

[Dmmitry]

@Petroveg а кнопку как правильно прописать?

[Евгений Петров]

@likeapimp почему кнопку? Я же написал именно data-атрибут, чтобы хоть на подошве ботинка можно было его вытатуировать. Ну ок, вот например так:

<span data-action="popover">Я — хозяин формы</span>

А дальше — ваша фантазия. Хотите — классы добавьте и оформите. А хотите — data-action="popover" можно и в любой видимый элемент на странице поставить.

Только учтите — в момент клика форма уже должна быть. Если вы её по AJAX получаете, то и обработчик необходимо определять при её получении.

[Dmmitry]

@Petroveg у меня таким способом не получилось (Я — хозяин формы)

[Евгений Петров]

@likeapimp вы код покажите.

[Хабиб Омаров]

@Petroveg SR_startPopOver это что означает?

[Евгений Петров]

@temp-market у вас в коде после таблицы эта функция написана.

[Хабиб Омаров]

@Petroveg это был не мой код но всеравно спасибо

[Хабиб Омаров]

@Petroveg jsfiddle.net/HabibOmarov/6kqfr928 что здесь не так?

[Евгений Петров]

@temp-market вот ваш вариант

<script src="popover.js"></script>
<script>
$(document).on('click', '[data-action="popover"]', function () {
	popover_set_margins(5, 5, 5, 5);
	popover_slide('SR_PopOver', 'centerUp', 'centerCenter', 200, 0, '#000000');
});
</script>
<div id="SR_PopOverModalBackground" ...></div>
<span ...><table ...>...</table></span>

Я для упрощения выкинул говнокод в виде HTML-разметки. Но вы его вставите назад, когда будете применять это.

[Евгений Петров]

@temp-market

что здесь не так?

Слева нужно выбрать подключаемую библиотеку. В вашем случае jQuery edge. Хоть 1хх, хоть 2хх.

[Евгений Петров]

@temp-market вот так jsfiddle.net/petroveg/6kqfr928/1

[Хабиб Омаров]

@Petroveg Спасибо дружище

[Dmmitry]

@Petroveg cделал так, не работает

<!-- SmartResponder.ru PopOver code (begin) -->
<script language="javascript" type="text/javascript" src="popover.js"></script>
<script>
$(document).on('click', '[data-action="popover"]', function () {
	popover_set_margins(5, 5, 5, 5);
	popover_slide('SR_PopOver', 'centerUp', 'centerCenter', 200, 0, '#000000');
});
</script>

<div id="SR_PopOverModalBackground" style="display: none; background-color:#000; filter: alpha(opacity=90);  width: 100%; position: absolute; top: 0px; left: 0px; opacity: 0;"></div><span style="margin: 0; padding: 10px; width: 384px; height: 370; position: absolute; left: 0; right: 0; display: none; background:url(opacity.png);" id="SR_PopOver"><table cellspacing="0" cellpadding="0"><tr><td><table cellspacing="0" cellpadding="3" width="100%" height="100%">
<tr valign="middle"><td onMouseDown="popover_drag_start(event, this, 'SR_PopOver')" width="100%" align="left" style="font-family: Courier; font-size: 12pt; color: #ffffff; font-weight: bold;">&nbsp;</td><td align="right"><table cellspacing="0"><tr><td style="padding: 5 10 0 3; font-family: Verdana; font-size: 10pt; color: #ff0000; font-weight: bold;" onClick="popover_slideClose('SR_PopOver', 'up', 200)" onMouseOver="this.style.cursor='pointer'" onMouseOut="this.style.cursor='default'"><img src="close.png"/></td></tr></table></td></tr><tr><td colspan="2" style="font-family: Verdana; font-size: 10pt; color: #000000;" align="center" valign="middle" height="100%">

content


</td></tr></table></td></tr></table></span>
<!-- SmartResponder.ru PopOver code (end) -->

<div data-action="popover">Клик</div>

[Евгений Петров]

@likeapimp
1. Если так и написали, слово в слово, то это неверно — строки нельзя так разрывать переносами, как вы сделали в таблице.

2. Заведите аккаунт на jsfiddle.net — там можно указывать сторонние ссылки на скрипты и стили. Выложите туда свой минимальный код. Минимальный, портянки не нужны.