Еднократно показване на диалогов прозорец

Готови кодове за по-голяма атрактивност
Post Reply
ystefanov
Потребител
Потребител
Posts: 685
Joined: Wed Jan 16, 2008 12:55 pm

Еднократно показване на диалогов прозорец

Post by ystefanov » Sun Sep 14, 2014 4:28 pm

Поставих този модален диалогов прозорец
http://arcticlab.ru/arcticmodal/#desc

Нормално си работи, но някой може ли да подскаже, дали може да се настрои така, че диалоговия прозорец да се отваря само един път?

В момента при всяко зареждане на съответната страница се отваря прозореца, а ми се иска само веднъж да се показва.

Надявам се някой да ми подксаже как да направя такава настройка.

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Sun Sep 14, 2014 4:59 pm

Виж този скрипт това е решението на твоя проблем. http://javascript.about.com/library/blfirst.htm

ystefanov
Потребител
Потребител
Posts: 685
Joined: Wed Jan 16, 2008 12:55 pm

Post by ystefanov » Mon Sep 15, 2014 5:49 am

Благодаря за скрипта, но ще ми трябва малко помощ.

Преди това ще посоча какво искам да направя.
Най-просто казано при влизане в сайта/страница от сайта да се показва един прозорец с надпис и бутон, който ще е линк.

Примерна визия
Image

В момента се запознавам с jquery и не съм сигурен точно какви манипулации мога да направя за да постигна исканата функция.

Опитах предложеното решение , но ми излиза само прозорец с надпис welcome. Наистина еднократно се показва, но може ли същия код да се добави към този диалогово прозорец (или да ми предложите друг плъгин)?
http://arcticlab.ru/arcticmodal/#desc

Както споменах не съм сигурен как точно мога да преправя посоченият от вас код, до тази визия за която говоря.

Ще съм благодарен за всякакви насоки.

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1600
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 165
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Mon Sep 15, 2014 7:14 am

//....
// example code to call it - you may modify this as required
function start() {
if (firstTime(thisPage())) {
// this code only runs for first visit
alert('welcome');

}
// other code to run every time once page is loaded goes here
}
onload = start;
Обърни внимание на червения текст. Това е кодът, който трябва да се изпълни. В примера е дадено с alert(), но ти ще си го направиш с линка.

Примерно ако въпросния прозорец има id="samo_vednazh", ще напишеш следния код (на мястото на alert()-та):

[js]$('#samo_vednazh').show();[/js]

Като в css-a имаш

[css]#samo_vednazh {
display: none;
}[/css]
По този начин дивът ще е невидим, а само първия път ще се покаже.

ystefanov
Потребител
Потребител
Posts: 685
Joined: Wed Jan 16, 2008 12:55 pm

Post by ystefanov » Mon Sep 15, 2014 8:02 am

Мерси за опростеното обяснение.

Действа, но само едно нещо остава за дооправяне.
Сега всеки път се показва страничия фон, който е с прозрачност.
Възможно ли е и той да се показва само веднъж?

Ето CSS кода.

[css]
.arcticmodal-overlay,
.arcticmodal-container { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; }
.arcticmodal-container { overflow: auto; margin: 0; padding: 0; border: 0; border-collapse: collapse; }
*:first-child+html .arcticmodal-container { height: 100% }
.arcticmodal-container_i { height: 100%; margin: 0 auto; }
.arcticmodal-container_i2 { padding: 24px; margin: 0; border: 0; vertical-align: middle; }
.arcticmodal-error { padding: 20px; border-radius: 10px; background: #000; color: #fff; }
.arcticmodal-loading { width: 80px; height: 80px; border-radius: 10px; background: #000 url(loading.gif) no-repeat 50% 50%; }

#exampleModal {display: none;}
[/css]

JavaScript
[js](function(d){var g={type:"html",content:"",url:"",ajax:{},ajax_request:null,closeOnEsc:!0,closeOnOverlayClick:!0,clone:!1,overlay:{block:void 0,tpl:'<div class="arcticmodal-overlay"></div>',css:{backgroundColor:"#000",opacity:0.6}},container:{block:void 0,tpl:'<div class="arcticmodal-container"><table class="arcticmodal-container_i"><tr><td class="arcticmodal-container_i2"></td></tr></table></div>'},wrap:void 0,body:void 0,errors:{tpl:'<div class="arcticmodal-error arcticmodal-close"></div>',autoclose_delay:2E3,
ajax_unsuccessful_load:"Error"},openEffect:{type:"fade",speed:400},closeEffect:{type:"fade",speed:400},beforeOpen:d.noop,afterOpen:d.noop,beforeClose:d.noop,afterClose:d.noop,afterLoading:d.noop,afterLoadingOnShow:d.noop,errorLoading:d.noop},j=0,e=d([]),m={isEventOut:function(a,b){var c=!0;d(a).each(function(){d(b.target).get(0)==d(this).get(0)&&(c=!1);0==d(b.target).closest("HTML",d(this).get(0)).length&&(c=!1)});return c}},f={getParentEl:function(a){var b=d(a);return b.data("arcticmodal")?b:(b=
d(a).closest(".arcticmodal-container").data("arcticmodalParentEl"))?b:!1},transition:function(a,b,c,e){e=void 0==e?d.noop:e;switch(c.type){case "fade":"show"==b?a.fadeIn(c.speed,e):a.fadeOut(c.speed,e);break;case "none":"show"==b?a.show():a.hide(),e()}},prepare_body:function(a,b){d(".arcticmodal-close",a.body).unbind("click.arcticmodal").bind("click.arcticmodal",function(){b.arcticmodal("close");return!1})},init_el:function(a,b){var c=a.data("arcticmodal");if(!c){c=b;j++;c.modalID=j;c.overlay.block=
d(c.overlay.tpl);c.overlay.block.css(c.overlay.css);c.container.block=d(c.container.tpl);c.body=d(".arcticmodal-container_i2",c.container.block);b.clone?c.body.html(a.clone(!0)):(a.before('<div id="arcticmodalReserve'+c.modalID+'" style="display: none" />'),c.body.html(a));f.prepare_body(c,a);c.closeOnOverlayClick&&c.overlay.block.add(c.container.block).click(function(b){m.isEventOut(d(">*",c.body),b)&&a.arcticmodal("close")});c.container.block.data("arcticmodalParentEl",a);a.data("arcticmodal",c);
e=d.merge(e,a);d.proxy(h.show,a)();if("html"==c.type)return a;if(void 0!=c.ajax.beforeSend){var k=c.ajax.beforeSend;delete c.ajax.beforeSend}if(void 0!=c.ajax.success){var g=c.ajax.success;delete c.ajax.success}if(void 0!=c.ajax.error){var l=c.ajax.error;delete c.ajax.error}var n=d.extend(!0,{url:c.url,beforeSend:function(){void 0==k?c.body.html('<div class="arcticmodal-loading" />'):k(c,a)},success:function(b){a.trigger("afterLoading");c.afterLoading(c,a,b);void 0==g?c.body.html(b):g(c,a,b);f.prepare_body(c,
a);a.trigger("afterLoadingOnShow");c.afterLoadingOnShow(c,a,b)},error:function(){a.trigger("errorLoading");c.errorLoading(c,a);void 0==l?(c.body.html(c.errors.tpl),d(".arcticmodal-error",c.body).html(c.errors.ajax_unsuccessful_load),d(".arcticmodal-close",c.body).click(function(){a.arcticmodal("close");return!1}),c.errors.autoclose_delay&&setTimeout(function(){a.arcticmodal("close")},c.errors.autoclose_delay)):l(c,a)}},c.ajax);c.ajax_request=d.ajax(n);a.data("arcticmodal",c)}},init:function(a){a=
d.extend(!0,{},g,a);if(d.isFunction(this))if(void 0==a)d.error("jquery.arcticmodal: Uncorrect parameters");else if(""==a.type)d.error('jquery.arcticmodal: Don\'t set parameter "type"');else switch(a.type){case "html":if(""==a.content){d.error('jquery.arcticmodal: Don\'t set parameter "content"');break}var b=a.content;a.content="";return f.init_el(d(b),a);case "ajax":if(""==a.url){d.error('jquery.arcticmodal: Don\'t set parameter "url"');break}return f.init_el(d("<div />"),a)}else return this.each(function(){f.init_el(d(this),
d.extend(!0,{},a))})}},h={show:function(){var a=f.getParentEl(this);if(!1===a)d.error("jquery.arcticmodal: Uncorrect call");else{var b=a.data("arcticmodal");b.overlay.block.hide();b.container.block.hide();d("BODY").append(b.overlay.block);d("BODY").append(b.container.block);b.beforeOpen(b,a);a.trigger("beforeOpen");if("hidden"!=b.wrap.css("overflow")){b.wrap.data("arcticmodalOverflow",b.wrap.css("overflow"));var c=b.wrap.outerWidth(!0);b.wrap.css("overflow","hidden");var g=b.wrap.outerWidth(!0);g!=
c&&b.wrap.css("marginRight",g-c+"px")}e.not(a).each(function(){d(this).data("arcticmodal").overlay.block.hide()});f.transition(b.overlay.block,"show",1<e.length?{type:"none"}:b.openEffect);f.transition(b.container.block,"show",1<e.length?{type:"none"}:b.openEffect,function(){b.afterOpen(b,a);a.trigger("afterOpen")});return a}},close:function(){if(d.isFunction(this))e.each(function(){d(this).arcticmodal("close")});else return this.each(function(){var a=f.getParentEl(this);if(!1===a)d.error("jquery.arcticmodal: Uncorrect call");
else{var b=a.data("arcticmodal");!1!==b.beforeClose(b,a)&&(a.trigger("beforeClose"),e.not(a).last().each(function(){d(this).data("arcticmodal").overlay.block.show()}),f.transition(b.overlay.block,"hide",1<e.length?{type:"none"}:b.closeEffect),f.transition(b.container.block,"hide",1<e.length?{type:"none"}:b.closeEffect,function(){b.afterClose(b,a);a.trigger("afterClose");b.clone||d("#arcticmodalReserve"+b.modalID).replaceWith(b.body.find(">*"));b.overlay.block.remove();b.container.block.remove();a.data("arcticmodal",
null);d(".arcticmodal-container").length||(b.wrap.data("arcticmodalOverflow")&&b.wrap.css("overflow",b.wrap.data("arcticmodalOverflow")),b.wrap.css("marginRight",0))}),"ajax"==b.type&&b.ajax_request.abort(),e=e.not(a))}})},setDefault:function(a){d.extend(!0,g,a)}};d(function(){g.wrap=d(document.all&&!document.querySelector?"html":"body")});d(document).bind("keyup.arcticmodal",function(a){var b=e.last();b.length&&b.data("arcticmodal").closeOnEsc&&27===a.keyCode&&b.arcticmodal("close")});d.arcticmodal=
d.fn.arcticmodal=function(a){if(h[a])return h[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof a||!a)return f.init.apply(this,arguments);d.error("jquery.arcticmodal: Method "+a+" does not exist")}})(jQuery);[/js]

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Mon Sep 15, 2014 8:24 am

Ето ти пример как трябва де е за да работи. Направи си една тестова хтмл страница и го пейстни. Единственото което трябва да направиш е да си оправиш пътищата в хеда, защото аз съм си ги направил както е пре мене.

Code: Select all

<!DOCTYPE html>
    
<html>

    <head>

        <title>First Time</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            
        <link href = "jquery.arcticmodal-0.3.css" rel = "stylesheet" type = "text/css" />
		<link href = "themes/simple.css" rel = "stylesheet" type = "text/css" />
            
        <script src="jquery-1.6.1.min.js" type="text/javascript" ></script>
		<script src="jquery.arcticmodal-0.3.min.js" type="text/javascript" ></script>

    </head>

    <body>

        <div style="display&#58; none;">
            <div class="box-modal" id="exampleModal">
            <div class="box-modal_close arcticmodal-close">close</div>
			    <p style="matgin&#58; 10px;"> Опитах предложеното решение , но ми излиза само прозорец с надпис welcome. Наистина еднократно се показва, но може ли същия код да се добави към този диалогово прозорец &#40;или да ми предложите друг плъгин&#41;? </p>
                <a href="http&#58;//www.google.com/" style="text-decoration&#58; none; background&#58; red; color&#58; white; width&#58; 100px; height&#58; 30px; padding&#58; 10px; ">www.site.com</a>
            </div>
        </div>
		
		<script>

        function rC&#40;nam&#41; &#123;var tC = document.cookie.split&#40;'; '&#41;; for &#40;var i = tC.length - 1; i >= 0; i--&#41; &#123;var x = tC&#91;i&#93;.split&#40;'='&#41;; if &#40;nam == x&#91;0&#93;&#41; return unescape&#40;x&#91;1&#93;&#41;;&#125; return '~';&#125; function wC&#40;nam,val&#41; &#123;document.cookie = nam + '=' + escape&#40;val&#41;;&#125; function lC&#40;nam,pg&#41; &#123;var val = rC&#40;nam&#41;; if &#40;val.indexOf&#40;'~'+pg+'~'&#41; != -1&#41; return false; val += pg + '~'; wC&#40;nam,val&#41;; return true;&#125; function firstTime&#40;cN&#41; &#123;return lC&#40;'pWrD4jBo',cN&#41;;&#125; function thisPage&#40;&#41; &#123;var page = location.href.substring&#40;location.href.lastIndexOf&#40;'\/'&#41;+1&#41;; pos = page.indexOf&#40;'.'&#41;;if &#40;pos > -1&#41; &#123;page = page.substr&#40;0,pos&#41;;&#125; return page;&#125;


        function start&#40;&#41; &#123;
        if &#40;firstTime&#40;thisPage&#40;&#41;&#41;&#41; &#123;
        $&#40;function&#40;&#41;&#123;
            $&#40;'#exampleModal'&#41;.arcticmodal&#40;&#41;;
        &#125;&#41;;
        &#125;
        &#125;
        onload = start;
                  
		</script>

    </body>

</html>

ystefanov
Потребител
Потребител
Posts: 685
Joined: Wed Jan 16, 2008 12:55 pm

Post by ystefanov » Mon Sep 15, 2014 11:52 am

Опитах и с този html код като промених кода от head полето, но сега се показва еднократно само фона без прозореца.

Нататък вече не се показва и прозореца и фона, но в началото само се губи процореца с текста и бутона.

В body не съм променял нищо.

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Mon Sep 15, 2014 12:00 pm

Еми има два варианта да не работи при теб. Първо си виж jQuery версията. Понякога най новата версия не е съвместима с по стари скриптове какъвто, е този. Аз съм ползвал в този пример jquery-1.6.1.min.js. Другото е ако си пипал нещо по цсс-а. При мен не е пипано нищо така съм го свалил от сайта който ти даде. И трето нещо с браузъра ти да не е наред но не вярвам, при положение че при мен работи и под мозила и интернет експлорър.

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Mon Sep 15, 2014 12:09 pm

И също така виж внимателно какво добовяш в хеда. Трябва да имаш два цсс файла и два jQuery

jquery.arcticmodal-0.3.css
simple.css
jquery-1.6.1.min.js
jquery.arcticmodal-0.3.min.js

ystefanov
Потребител
Потребител
Posts: 685
Joined: Wed Jan 16, 2008 12:55 pm

Post by ystefanov » Mon Sep 15, 2014 7:37 pm

Грешката беше в CSS файла, преди това го редактирах, но с оригиналните файлове е наред.

Много благодаря за помощта!

Post Reply