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

ystefanov

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

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

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

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

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

Примерна визия
6226.jpg


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

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

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

Ще съм благодарен за всякакви насоки.
 
//....
// 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]
По този начин дивът ще е невидим, а само първия път ще се покаже.
 
Мерси за опростеното обяснение.

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

Ето 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]
 
Ето ти пример как трябва де е за да работи. Направи си една тестова хтмл страница и го пейстни. Единственото което трябва да направиш е да си оправиш пътищата в хеда, защото аз съм си ги направил както е пре мене.


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

        function rC(nam) {var tC = document.cookie.split('; '); for (var i = tC.length - 1; i >= 0; i--) {var x = tC[i].split('='); if (nam == x[0]) return unescape(x[1]);} return '~';} function wC(nam,val) {document.cookie = nam + '=' + escape(val);} function lC(nam,pg) {var val = rC(nam); if (val.indexOf('~'+pg+'~') != -1) return false; val += pg + '~'; wC(nam,val); return true;} function firstTime(cN) {return lC('pWrD4jBo',cN);} function thisPage() {var page = location.href.substring(location.href.lastIndexOf('\/')+1); pos = page.indexOf('.');if (pos > -1) {page = page.substr(0,pos);} return page;}


        function start() {
        if (firstTime(thisPage())) {
        $(function(){
            $('#exampleModal').arcticmodal();
        });
        }
        }
        onload = start;
                  
		</script>

    </body>

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

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

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

jquery.arcticmodal-0.3.css
simple.css
jquery-1.6.1.min.js
jquery.arcticmodal-0.3.min.js
 
Грешката беше в CSS файла, преди това го редактирах, но с оригиналните файлове е наред.

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

Горе