Помощник
|
Всплывающее окно при клике по ссылке. |
crazyicf |
27.1.2010, 3:44;
Ответить: crazyicf
Сообщение
#1
|
|
почитал все 3 страницы, вообще все шикарно, но есть пару НО. Можно ли из библиотеки jquery вырезать только то, что требуется для открытия всплывающего окна...ну задача минимизировать данный скрипт.... и чтоб при нажатии на ссылку подгружался отдельный html файл в этом окне....ну и ссылка ес-но должна задаваться.
|
|
|
Letmetouchyou |
27.1.2010, 9:48;
Ответить: Letmetouchyou
Сообщение
#2
|
|
ну задача минимизировать данный скрипт без библиотеки его будет раз в 20 больше ) и не будет плавного появления и исчезновения) и чтоб при нажатии на ссылку подгружался отдельный html файл <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> <script type="text/javascript" src="jquery.js"></script> <style> .popup {display:none; width:250px; height:70px; font:13px normal 'Tahoma'; color#033151; background:#ecf6ff; border:8px solid #bbe0ff; position:absolute;} #background {display:none; position:fixed; height:100%; width:100%; top:0; left:0; background:#000000; border:1px dotted #cecece; z-index:1;} </style> <script type="text/javascript"> $(document).ready(function(){ $('.no').click(function(){ $('.popup').fadeOut('slow'); $('#background').fadeOut('slow'); }); $('.show').click(function(e){ $('#background').fadeIn('slow'); $('.popup').fadeIn('slow'); var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $(".popup'").height(); var popupWidth = $(".popup'").width(); $(".popup'").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); $('.popup').load('file.html'); $("#background").css({ "height": windowHeight }); }); }); </script> </head> <body> <a href='#' class='show'>show</a><div id="background"> <div class='popup'> </div> </div> </div> </body> </html> $('.popup').load('file.html'); file.html - подгружаемый файл. |
|
|
Jacky |
7.2.2010, 17:39;
Ответить: Jacky
Сообщение
#3
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> вот напрмер. кнопку азкртия окна или сам сделай , или я взатра сделаю, шас убегаю просто)<html> <head> <style type='text/css'> .back {display:none; position:fixed; _position:absolute; height:100%; width:100%; top:0; left:0; background:#000000; border:1px solid #cecece; z-index:1;} .pop {position:absolute; z-index:2; display:none; width:200px; height:200px; background:#6ca8e5; border:4px solid #3399ff;} .click {width:150px; height:300px; margin:200px auto; background:#baf74e; border:5px solid #99df1e; color:#009900; font-weight:bold; font-size:25px; text-transform:uppercase; letter-spacing:-3px;} </style> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.click').click(function(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $(".pop").height(); var popupWidth = $(".pop").width(); $(".back").css({"opacity": "0.8","height": windowHeight}); $(".back").fadeIn("slow"); $('.pop').fadeIn('slow'); $('.pop').css({ 'top': windowHeight/2-popupHeight/2, 'left': windowWidth/2-popupWidth/2 }); }); }); </script> </head> <body> <div class='click'> clickable </div> <div class='pop'> </div> <div class='back'> a </div> </body> </html> Народ, давно уже ищу что то подобное, наконец нашел. Но есть несколько ошибок он не работает в IE и когда нажимаешь он станивится не по центру экрана а по центру всей страницы, то есть если страница со Scroll то надо опускаться в самый центр. И как сделать что бы можно было на сайте разместить несколько таких блоков?(без постоянного копирования скрипта с разным id) Надеюсь на вашу помощь, очень надо а сам в этом не соображаю. |
|
|
Letmetouchyou |
7.2.2010, 20:21;
Ответить: Letmetouchyou
Сообщение
#4
|
|
10$ :)
так как ты скзал - можно моного чего сделать. по конктрентее нужно |
|
|
skarbby |
14.9.2011, 14:17;
Ответить: skarbby
Сообщение
#5
|
|
|
|
|
webog |
16.8.2012, 21:31;
Ответить: webog
Сообщение
#6
|
|
Добра всем! :)
Есть вопросик. Использую данный скрипт. Все работает. Проблема вслудующем... СКРИПТ имеет струтктуру... 1. тема сообщение 2. тема2 ссобщение2 3. тема3 сообщение3 и т.д. Слово тема представлена как ссылка и вытаскиевает из базы сообщение (структура базы: ID, тема, сообщение, от кого, дата) Т.е. все работает. Как только подключаю всплывающее окно, то в этом окне всегда показывается первоо сообщение даже если нажать на последнее!!! Ссылка имеет вид [PHP]<a href='/vp.php#' class='show' style='color:#090;'>".$row_vp['subgect']."</a>[/PHP] Где я пуплю? СПАСИБО! :) -------------------- |
|
|
Sikha |
29.8.2012, 10:57;
Ответить: Sikha
Сообщение
#7
|
|
Доброго времени суток, миллион лет тут небыл )))))
Вопрос на сколько сложно реализовать всплывающую корзину как на спб пица ? нажмите на кнопку КУПИТЬ и все станет ясно!)))) |
|
|
cyber_ua |
29.8.2012, 11:11;
Ответить: cyber_ua
Сообщение
#8
|
|
Доброго времени суток, миллион лет тут небыл ))))) Вопрос на сколько сложно реализовать всплывающую корзину как на спб пица ? нажмите на кнопку КУПИТЬ и все станет ясно!)))) не очень, все зависит от суммы:sarcastic: |
|
|
waw555 |
6.9.2012, 19:16;
Ответить: waw555
Сообщение
#9
|
|
Окно появляется в левой стороне, по вертикали нормально отступает, а по горизонтали вообще не отступает, помогите исправить.
// Login Popup
jQuery(document).ready(function(){ jQuery("#login_popup").overlay({ expose: { color: '#000', loadSpeed: 200, opacity: 0.7 }, closeOnClick: true, api: true }); jQuery('#login_link').click(function(){ jQuery('#login_popup').overlay().load(); }); }); (function (c) { c.tools = c.tools || {}; c.tools.overlay = { version: "1.1.2", addEffect: function (e, f, g) { b[e] = [f, g] }, conf: { top: "10%", left: "center", absolute: false, speed: "normal", closeSpeed: "fast", effect: "default", close: null, oneInstance: true, closeOnClick: true, closeOnEsc: true, api: false, expose: null, target: null } }; var b = {}; c.tools.overlay.addEffect("default", function (e) { this.getOverlay().fadeIn(this.getConf().speed, e) }, function (e) { this.getOverlay().fadeOut(this.getConf().closeSpeed, e) }); var d = []; function a(g, k) { var o = this, m = c(this), n = c(window), j, i, h, e = k.expose && c.tools.expose.version; var f = k.target || g.attr("rel"); i = f ? c(f) : null || g; if (!i.length) { throw "Could not find Overlay: " + f } if (g && g.index(i) == -1) { g.click(function (p) { o.load(p); return p.preventDefault() }) } c.each(k, function (p, q) { if (c.isFunction(q)) { m.bind(p, q) } }); c.extend(o, { load: function (u) { if (o.isOpened()) { return o } var r = b[k.effect]; if (!r) { throw 'Overlay: cannot find effect : "' + k.effect + '"' } if (k.oneInstance) { c.each(d, function () { this.close(u) }) } u = u || c.Event(); u.type = "onBeforeLoad"; m.trigger(u); if (u.isDefaultPrevented()) { return o } h = true; if (e) { i.expose().load(u) } var t = k.top; var s = k.left; var p = i.outerWidth({ margin: true }); var q = i.outerHeight({ margin: true }); if (typeof t == "string") { t = t == "center" ? Math.max((n.height() - q) / 2, 0) : parseInt(t, 10) / 100 * n.height() } if (s == "center") { s = Math.max((n.width() - p) / 2, 0) } if (!k.absolute) { t += n.scrollTop(); s += n.scrollLeft() } i.css({ top: t, left: s, position: "absolute" }); u.type = "onStart"; m.trigger(u); r[0].call(o, function () { if (h) { u.type = "onLoad"; m.trigger(u) } }); if (k.closeOnClick) { c(document).bind("click.overlay", function (w) { if (!o.isOpened()) { return } var v = c(w.target); if (v.parents(i).length > 1) { return } c.each(d, function () { this.close(w) }) }) } if (k.closeOnEsc) { c(document).unbind("keydown.overlay").bind("keydown.overlay", function (v) { if (v.keyCode == 27) { c.each(d, function () { this.close(v) }) } }) } return o }, close: function (q) { if (!o.isOpened()) { return o } q = q || c.Event(); q.type = "onBeforeClose"; m.trigger(q); if (q.isDefaultPrevented()) { return } h = false; b[k.effect][1].call(o, function () { q.type = "onClose"; m.trigger(q) }); var p = true; c.each(d, function () { if (this.isOpened()) { p = false } }); if (p) { c(document).unbind("click.overlay").unbind("keydown.overlay") } return o }, getContent: function () { return i }, getOverlay: function () { return i }, getTrigger: function () { return g }, getClosers: function () { return j }, isOpened: function () { return h }, getConf: function () { return k }, bind: function (p, q) { m.bind(p, q); return o }, unbind: function (p) { m.unbind(p); return o } }); c.each("onBeforeLoad,onStart,onLoad,onBeforeClose,onClose".split(","), function (p, q) { o[q] = function (r) { return o.bind(q, r) } }); if (e) { if (typeof k.expose == "string") { k.expose = { color: k.expose } } c.extend(k.expose, { api: true, closeOnClick: k.closeOnClick, closeOnEsc: false }); var l = i.expose(k.expose); l.onBeforeClose(function (p) { o.close(p) }); o.onClose(function (p) { l.close(p) }) } j = i.find(k.close || ".close"); if (!j.length && !k.close) { j = c('<div class="close"></div>'); i.prepend(j) } j.click(function (p) { o.close(p) }) } c.fn.overlay = function (e) { var f = this.eq(typeof e == "number" ? e : 0).data("overlay"); if (f) { return f } if (c.isFunction(e)) { e = { onBeforeLoad: e } } var g = c.extend({}, c.tools.overlay.conf); e = c.extend(true, g, e); this.each(function () { f = new a(c(this), e); d.push(f); c(this).data("overlay", f) }); return e.api ? f : this } })(jQuery); (function (b) { b.tools = b.tools || {}; b.tools.expose = { version: "1.0.5", conf: { maskId: null, loadSpeed: "slow", closeSpeed: "fast", closeOnClick: true, closeOnEsc: true, zIndex: 9998, opacity: 0.8, color: "#456", api: false } }; function a() { if (b.browser.msie) { var f = b(document).height(), e = b(window).height(); return [window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, f - e < 20 ? e : f] } return [b(window).width(), b(document).height()] } function c(h, g) { var e = this, j = b(this), d = null, f = false, i = 0; b.each(g, function (k, l) { if (b.isFunction(l)) { j.bind(k, l) } }); b(window).resize(function () { e.fit() }); b.extend(this, { getMask: function () { return d }, getExposed: function () { return h }, getConf: function () { return g }, isLoaded: function () { return f }, load: function (n) { if (f) { return e } i = h.eq(0).css("zIndex"); if (g.maskId) { d = b("#" + g.maskId) } if (!d || !d.length) { var l = a(); d = b("<div/>").css({ position: "absolute", top: 0, left: 0, width: l[0], height: l[1], display: "none", opacity: 0, zIndex: g.zIndex }); if (g.maskId) { d.attr("id", g.maskId) } b("body").append(d); var k = d.css("backgroundColor"); if (!k || k == "transparent" || k == "rgba(0, 0, 0, 0)") { d.css("backgroundColor", g.color) } if (g.closeOnEsc) { b(document).bind("keydown.unexpose", function (o) { if (o.keyCode == 27) { e.close() } }) } if (g.closeOnClick) { d.bind("click.unexpose", function (o) { e.close(o) }) } } n = n || b.Event(); n.type = "onBeforeLoad"; j.trigger(n); if (n.isDefaultPrevented()) { return e } b.each(h, function () { var o = b(this); if (!/relative|absolute|fixed/i.test(o.css("position"))) { o.css("position", "relative") } }); h.css({ zIndex: Math.max(g.zIndex + 1, i == "auto" ? 0 : i) }); var m = d.height(); if (!this.isLoaded()) { d.css({ opacity: 0, display: "block" }).fadeTo(g.loadSpeed, g.opacity, function () { if (d.height() != m) { d.css("height", m) } n.type = "onLoad"; j.trigger(n) }) } f = true; return e }, close: function (k) { if (!f) { return e } k = k || b.Event(); k.type = "onBeforeClose"; j.trigger(k); if (k.isDefaultPrevented()) { return e } d.fadeOut(g.closeSpeed, function () { k.type = "onClose"; j.trigger(k); h.css({ zIndex: b.browser.msie ? i : null }) }); f = false; return e }, fit: function () { if (d) { var k = a(); d.css({ width: k[0], height: k[1] }) } }, bind: function (k, l) { j.bind(k, l); return e }, unbind: function (k) { j.unbind(k); return e } }); b.each("onBeforeLoad,onLoad,onBeforeClose,onClose".split(","), function (k, l) { e[l] = function (m) { return e.bind(l, m) } }) } b.fn.expose = function (d) { var e = this.eq(typeof d == "number" ? d : 0).data("expose"); if (e) { return e } if (typeof d == "string") { d = { color: d } } var f = b.extend({}, b.tools.expose.conf); d = b.extend(f, d); this.each(function () { e = new c(b(this), d); b(this).data("expose", e) }); return d.api ? e : this } })(jQuery); |
|
|
malzi |
2.9.2014, 18:59;
Ответить: malzi
Сообщение
#10
|
|
|
Подскажите есть форма любая но с Select например:
<form method="POST" id="orderForm" action="orders"> <input type="hidden" name="step" value="1"> <select class="w500" name="w5" id="e5"> <option value="">Выберите курс...</option> <option value=""> - - - - - - - - - - 1 - - - - - - - - - - </option> <option value="193">2</option> <option value="1">3</option> <option value="200">4</option> <option value="2">5</option> </select> </form> как создать ссылку на эту форму при клике на которою в форме выбиралось бы нужное поле например 3 ?
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ. Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п |
7 | stu999 | 1759 | 31.3.2024, 11:19 автор: stu999 |
|
Получил странную ссылку при линкбилдинге Как поведет себя поиск при обнаружении странной ссылке? |
10 | r0mZet | 2206 | 24.10.2022, 19:23 автор: Wachowski |
|
300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе! | 65 | inkon | 30398 | 19.7.2022, 13:41 автор: Funoman |
|
тИЦ отменили! Новый показатель Яндекса ИКС! Лучшие площадки под размещение. Бесплатное написание статей при любом заказе. Эксклюзивное предложение. Успей получить написание статей БЕСПЛАТНО |
71 | VIMstat | 78516 | 21.6.2022, 9:38 автор: VIMstat |
|
Ukr Private Proxy 4g Lifecell, Kyivstar, Vodafone (ТЕСТ, смена по ссылке, ротация) Продам Личные Украинские приватные мобильные прокси 4g Lifecell, Kyivs |
1 | Kostyaxxxx | 4266 | 20.6.2021, 20:26 автор: Kostyaxxxx |
Текстовая версия | Сейчас: 26.4.2024, 2:29 |