• 16-12-2020, 17:15:36
    #1
    Üyeliği durduruldu
    Merhaba,

    php ile kodlanmış scriptimde pop-up kodu kullanacağım. Ama 2 adet farklı pop-up kullanacağım. Bu pop-upların aynı anda açılmasını değil de benim belirleyeceğim aralıklarla açılmasını istiyorum.

    Örneğin bir kullanıcı siteye giriş yaptı giriş yapınca ilk tıklamada bir pop açılacak ama diğeri benim belirlediğim sürede açılacak. örneğin 2 pop 1 dk sonra tıklarsa açılsn.

    Bu konuda bilgisi olan var mı acaba? Bunu nasıl yapabilirim?
  • 16-12-2020, 17:19:37
    #2
    Javascript ile kullandığın pop-up lara farklı trigger ekleyebilirsin.
    1.cisi click ile açılır. bu pop-up açıldığında sessionStorage'e bir değer atarsın. (tekrar sayfaya geldiğinde pop-up yine çıksın diye.)
    2. pop-up açılırken bu değeri kontrol eder ve yine settimeout fonksiyonuna girebilir.
    1 kere açılan birdaha açılmasın diyorsan da cookie'de yine bir değer atıp tüm pop-uplarda bunu kontrol edebilirsin.
  • 16-12-2020, 17:24:57
    #3
    Üyeliği durduruldu
    demirelsalih adlı üyeden alıntı: mesajı görüntüle
    Javascript ile kullandığın pop-up lara farklı trigger ekleyebilirsin.
    1.cisi click ile açılır. bu pop-up açıldığında sessionStorage'e bir değer atarsın. (tekrar sayfaya geldiğinde pop-up yine çıksın diye.)
    2. pop-up açılırken bu değeri kontrol eder ve yine settimeout fonksiyonuna girebilir.
    1 kere açılan birdaha açılmasın diyorsan da cookie'de yine bir değer atıp tüm pop-uplarda bunu kontrol edebilirsin.
    Hocam javascript hakkında pek bilgim yok. Var mı örnek bir kod?
  • 16-12-2020, 17:28:40
    #4
    Üyeliği durduruldu
    PHP Kodunuz;

     <div class="popup" onclick="myFunction()">Click me!
      <span class="popuptext" id="myPopup">Popup text...</span>
    </div>
    CSS Kodunuz;

    /* Popup container */
    .popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    /* The actual popup (appears on top) */
    .popup .popuptext {
      visibility: hidden;
      width: 160px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -80px;
    }
    
    /* Popup arrow */
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    /* Toggle this class when clicking on the popup container (hide and show the popup) */
    .popup .show {
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s
    }
    
    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    
    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity:1 ;}
    }
    JavaScript Kodunuz;

    <script>
    // When the user clicks on <div>, open the popup
    function myFunction() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");
    }
    </script>
    iyi forumlar
  • 16-12-2020, 17:34:43
    #5
    Üyeliği durduruldu
    farukdursun12 adlı üyeden alıntı: mesajı görüntüle
    PHP Kodunuz;

     <div class="popup" onclick="myFunction()">Click me!
      <span class="popuptext" id="myPopup">Popup text...</span>
    </div>
    CSS Kodunuz;

    /* Popup container */
    .popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    /* The actual popup (appears on top) */
    .popup .popuptext {
      visibility: hidden;
      width: 160px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -80px;
    }
    
    /* Popup arrow */
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    /* Toggle this class when clicking on the popup container (hide and show the popup) */
    .popup .show {
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s
    }
    
    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    
    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity:1 ;}
    }
    JavaScript Kodunuz;

    <script>
    // When the user clicks on <div>, open the popup
    function myFunction() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");
    }
    </script>
    iyi forumlar
    Hemen deniyorum. Teşekkürler.