X saatte bir çıkan popup modal reklam - R10.net
  • 14-07-2021, 10:09:40
    #1
    Merhaba arkadaşlar. Siteme bir modal reklam ekleyeceğim ancak kapattıktan sonra belirlediğim X saatte bir gözüksün, her sayfayı yenilediğimde çıkmasın istiyorum.

    İnternette şu örneğe denk geldim: https://www.sitepoint.com/show-modal...er-time-delay/

    Ancak aynı kodları kullanmama rağmen bende çalışmıyor. Elinde böyle bir örnek kod olan var mı acaba?
  • 14-07-2021, 10:17:17
    #2
    Uzun zamandır kullandığım kodlarımdandır, sıkıntı olursa yazabilirsiniz, iyi çalışmalar...
    #fadeinbox {
    BORDER-RIGHT:#ff000045 2px solid; PADDING-RIGHT: 4px; BORDER-TOP: #ff000045 2px solid; PADDING-LEFT: 4px; FONT-SIZE: 11px; Z-INDEX: 100; LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 4px; BORDER-LEFT: #ff000045 2px solid; WIDTH: 300px; PADDING-TOP: 4px; BORDER-BOTTOM: #ff000045 2px solid; FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif; POSITION: absolute; TOP: -400px; BACKGROUND-COLOR: #f6f6f6; border-radius: 20px/50px;
    }
    <!--
    //Specify display mode. 3 possible values are:
    //1) "always"- This makes the fade-in box load each time the page is displayed
    //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
    //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
    // For example, 2 would display the box about (1/2) 50% of the time the page loads.
    var displaymode="oncepersession"
    //var displaymode="always"
    var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
    var autohidebox=["yes", 45] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
    var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
    var IEfadelength=1 //fade in duration for IE, in seconds
    var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)
    ////////No need to edit beyond here///////////
    if (parseInt(displaymode)!=NaN)
    var random_num=Math.floor(Math.random()*displaymode)
    function displayfadeinbox(){
    var ie=document.all && !window.opera
    var dom=document.getElementById
    iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
    var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
    var docwidth=(ie)? iebody.clientWidth : window.innerWidth
    docheight=(ie)? iebody.clientHeight: window.innerHeight
    var objwidth=objref.offsetWidth
    objheight=objref.offsetHeight
    objref.style.left=docwidth/2-objwidth/2+"px"
    objref.style.top=scroll_top+docheight/2-objheight/2+"px"
    if (showonscroll=="yes")
    showonscrollvar=setInterval("staticfadebox()", 50)
    if (enablefade=="yes" && objref.filters){
    objref.filters[0].duration=IEfadelength
    objref.filters[0].Apply()
    objref.filters[0].Play()
    }
    objref.style.visibility="visible"
    if (objref.style.MozOpacity){
    if (enablefade=="yes")
    mozfadevar=setInterval("mozfadefx()", 90)
    else{
    objref.style.MozOpacity=1
    controlledhidebox()
    }
    }
    else
    controlledhidebox()
    }
    function mozfadefx(){
    if (parseFloat(objref.style.MozOpacity)<1)
    objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
    else{
    clearInterval(mozfadevar)
    controlledhidebox()
    }
    }
    function staticfadebox(){
    var ie=document.all && !window.opera
    var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
    objref.style.top=scroll_top+docheight/2-objheight/2+"px"
    }
    function hidefadebox(){
    objref.style.visibility="hidden"
    if (typeof showonscrollvar!="undefined")
    clearInterval(showonscrollvar)
    }
    function controlledhidebox(){
    if (autohidebox[0]=="yes"){
    var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
    setTimeout("hidefadebox()", delayvar)
    }
    }
    function initfunction(){
    setTimeout("displayfadeinbox()", 100)
    }
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = ""
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset)
    if (end == -1)
    end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
    if (window.addEventListener)
    window.addEventListener("load", initfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initfunction)
    else if (document.getElementById)
    window.onload=initfunction
    document.cookie="fadedin=yes"
    }
    //-->
    <div id="fadeinbox" style="left: 612px; top: 201px; visibility: hidden;">
    <br>
    <br><b><center>
        <img src="bir resim yolu belki" alt="poof">
        <br>
        Merhaba;
        <br>
        <br>
      BİŞE
        <br>
        BİŞE
        <br>
        <br>
        *Bu uyarı 24 saatte bir kez olmak üzere 45 sn. süre ile gösterilir.
        
        </center></b>
    <br>
    <div align="center"> <a href="#" onclick="hidefadebox();return false" class="gensmall"><i class="fas fa-times-circle"></i></a></div>
    </div>
  • 14-07-2021, 10:22:29
    #3
    NextWorld adlı üyeden alıntı: mesajı görüntüle
    Uzun zamandır kullandığım kodlarımdandır, sıkıntı olursa yazabilirsiniz, iyi çalışmalar...
    #fadeinbox {
    BORDER-RIGHT:#ff000045 2px solid; PADDING-RIGHT: 4px; BORDER-TOP: #ff000045 2px solid; PADDING-LEFT: 4px; FONT-SIZE: 11px; Z-INDEX: 100; LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 4px; BORDER-LEFT: #ff000045 2px solid; WIDTH: 300px; PADDING-TOP: 4px; BORDER-BOTTOM: #ff000045 2px solid; FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif; POSITION: absolute; TOP: -400px; BACKGROUND-COLOR: #f6f6f6; border-radius: 20px/50px;
    }
    <!--
    //Specify display mode. 3 possible values are:
    //1) "always"- This makes the fade-in box load each time the page is displayed
    //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
    //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
    // For example, 2 would display the box about (1/2) 50% of the time the page loads.
    var displaymode="oncepersession"
    //var displaymode="always"
    var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
    var autohidebox=["yes", 45] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
    var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
    var IEfadelength=1 //fade in duration for IE, in seconds
    var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)
    ////////No need to edit beyond here///////////
    if (parseInt(displaymode)!=NaN)
    var random_num=Math.floor(Math.random()*displaymode)
    function displayfadeinbox(){
    var ie=document.all && !window.opera
    var dom=document.getElementById
    iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
    var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
    var docwidth=(ie)? iebody.clientWidth : window.innerWidth
    docheight=(ie)? iebody.clientHeight: window.innerHeight
    var objwidth=objref.offsetWidth
    objheight=objref.offsetHeight
    objref.style.left=docwidth/2-objwidth/2+"px"
    objref.style.top=scroll_top+docheight/2-objheight/2+"px"
    if (showonscroll=="yes")
    showonscrollvar=setInterval("staticfadebox()", 50)
    if (enablefade=="yes" && objref.filters){
    objref.filters[0].duration=IEfadelength
    objref.filters[0].Apply()
    objref.filters[0].Play()
    }
    objref.style.visibility="visible"
    if (objref.style.MozOpacity){
    if (enablefade=="yes")
    mozfadevar=setInterval("mozfadefx()", 90)
    else{
    objref.style.MozOpacity=1
    controlledhidebox()
    }
    }
    else
    controlledhidebox()
    }
    function mozfadefx(){
    if (parseFloat(objref.style.MozOpacity)<1)
    objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
    else{
    clearInterval(mozfadevar)
    controlledhidebox()
    }
    }
    function staticfadebox(){
    var ie=document.all && !window.opera
    var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
    objref.style.top=scroll_top+docheight/2-objheight/2+"px"
    }
    function hidefadebox(){
    objref.style.visibility="hidden"
    if (typeof showonscrollvar!="undefined")
    clearInterval(showonscrollvar)
    }
    function controlledhidebox(){
    if (autohidebox[0]=="yes"){
    var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
    setTimeout("hidefadebox()", delayvar)
    }
    }
    function initfunction(){
    setTimeout("displayfadeinbox()", 100)
    }
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = ""
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset)
    if (end == -1)
    end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
    if (window.addEventListener)
    window.addEventListener("load", initfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initfunction)
    else if (document.getElementById)
    window.onload=initfunction
    document.cookie="fadedin=yes"
    }
    //-->
    <div id="fadeinbox" style="left: 612px; top: 201px; visibility: hidden;">
    <br>
    <br><b><center>
        <img src="bir resim yolu belki" alt="poof">
        <br>
        Merhaba;
        <br>
        <br>
      BİŞE
        <br>
        BİŞE
        <br>
        <br>
        *Bu uyarı 24 saatte bir kez olmak üzere 45 sn. süre ile gösterilir.
        
        </center></b>
    <br>
    <div align="center"> <a href="#" onclick="hidefadebox();return false" class="gensmall"><i class="fas fa-times-circle"></i></a></div>
    </div>
    İnceliyorum hocam, teşekkürler.

    Edit: Tam aradığım gibi işliyor, teşekkür ederim.
  • 14-07-2021, 10:33:11
    #4
    Hellscream adlı üyeden alıntı: mesajı görüntüle
    Merhaba arkadaşlar. Siteme bir modal reklam ekleyeceğim ancak kapattıktan sonra belirlediğim X saatte bir gözüksün, her sayfayı yenilediğimde çıkmasın istiyorum.

    İnternette şu örneğe denk geldim: https://www.sitepoint.com/show-modal...er-time-delay/

    Ancak aynı kodları kullanmama rağmen bende çalışmıyor. Elinde böyle bir örnek kod olan var mı acaba?

     if (document.cookie.indexOf("modalShown=true") == -1) {
            document.cookie = "modalShown=true; max-age=10"; // saniye olarak zaman
            $('#modalID').modal('show'); //jquery
        }
    10 değerini 3600 yaparsanız ilk açılıştan sonraki 1 saat içerisinde tekrar açılmaz. En basit hali ile böyle. Kullanım şeklinize göre daha farklı kontrollerle de yapılabilir.
  • 14-07-2021, 10:43:53
    #5
    ZEON adlı üyeden alıntı: mesajı görüntüle
     if (document.cookie.indexOf("modalShown=true") == -1) {
            document.cookie = "modalShown=true; max-age=10"; // saniye olarak zaman
            $('#modalID').modal('show'); //jquery
        }
    10 değerini 3600 yaparsanız ilk açılıştan sonraki 1 saat içerisinde tekrar açılmaz. En basit hali ile böyle. Kullanım şeklinize göre daha farklı kontrollerle de yapılabilir.
    Teşekkürler hocam, üstte arkadaşın verdiği örneği düzenleyerek kullandım.
  • 14-07-2021, 10:56:39
    #6
    Hellscream adlı üyeden alıntı: mesajı görüntüle
    İnceliyorum hocam, teşekkürler.

    Edit: Tam aradığım gibi işliyor, teşekkür ederim.
    Rica ederim, kolay gelsin...
  • 14-07-2021, 10:58:39
    #7
    NextWorld adlı üyeden alıntı: mesajı görüntüle
    Rica ederim, kolay gelsin...
    Tek sorun responsive değil, masaüstünde yaklaşınca ekranın sağına kayıyor. Mobilde gözükmüyor (sanırım ekranın dışına taşıyor).

    Bu konuda bilginiz var mı acaba? Position absolute ile çalışırken hep kafam karışıyor, bir türlü oturtamadım responsive'liği
  • 14-07-2021, 11:11:15
    #8
    Hellscream adlı üyeden alıntı: mesajı görüntüle
    Tek sorun responsive değil, masaüstünde yaklaşınca ekranın sağına kayıyor. Mobilde gözükmüyor (sanırım ekranın dışına taşıyor).

    Bu konuda bilginiz var mı acaba? Position absolute ile çalışırken hep kafam karışıyor, bir türlü oturtamadım responsive'liği
    Evet, maalesef responsive değil. Kendi adıma kullandığım sitede yalnızca masaüstü versiyon mevcuttu, bu sebeple sorun oluşturmamıştı. Kod yeniden düzenlenmeli, bunun için şuanda vaktim yok. İlerde olursa dönüş yaparım.
R10.net sizlere daha iyi hizmet sunmak için çerezleri kullanıyor.R10.net'i kullanarak çerezleri kullanmamızı kabul etmiş olacaksınız.
Detaylı bilgi almak için Gizlilik ve Çerez Politikası metnimizi inceleyebilirsiniz.