Cài đặt hộp thoại modal auto popup bằng localStorage

Khi độc giả truy cập trang blog, bạn muốn hộp thoại modal tự động bật lên sau khoảng thời gian vài giây với nội dung thông báo hay mẫu điền form và khi độc giả click vào nút tắt hộp thoại hay đã submitted form khi load lại trang web hộp thoại modal sẽ không tư động bật lên nữa cho đến khi xóa lịch sử duyệt web.

Áp dụng nếu bạn đang sử dụng hộp thoại modal trong bài viết Tự tạo hộp thoại modal không sử dụng plugin ngoài đầu tiên bạn tạo hộp thoại trước ví dụ như mẫu điền form sau:

<div class="modal--target modal--html" id="contact">

  <div class="modal--confirm">

    <form action="" class="modal--dialog green" methor="POST" name="contact-form" target="hidden_iframe">

      <div class="_3em"></div>

      <div class="modal--content">

        <div class="modal--header">

          <div class="_mht">Biểu mẫu liên hệ</div>

          <div class="_mhc modal--icon modal--close"></div>

        </div>

        <div class="modal--body">

          <div class="form-group mr-10">

            <div class="input-group pd-10 w-50">

              <div class="input-title">Họ tên <span>*</span></div>

              <input autocomplete="off" class="input" name="" placeholder="Câu trả lời của bạn..." required="" spellcheck="false" type="text" value="">

              <i class="bar"></i>

            </div>

            <div class="input-group pd-10 w-50">

              <div class="input-title">Số điện thoại <span>*</span></div>

              <input autocomplete="off" class="input" name="" placeholder="Câu trả lời của bạn..." required="" spellcheck="false" type="text" value="">

              <i class="bar"></i>

            </div>

            <div class="input-group pd-10 w-50">

              <div class="input-title">Địa chỉ liên lạc</div>

              <input autocomplete="off" class="input" name="" placeholder="Câu trả lời của bạn..." spellcheck="false" type="text" value="">

              <i class="bar"></i>

            </div>

            <div class="input-group pd-10 w-50">

              <div class="input-title">Địa chỉ email <span>*</span></div>

              <input autocomplete="off" class="input" name="" placeholder="Câu trả lời của bạn..." required="" spellcheck="false" type="text" value="">

              <i class="bar"></i>

            </div>

            <div class="input-group pd-10 w-100">

              <div class="input-title">Yêu cầu khác</div>

              <textarea class="input textarea" name="" placeholder="Câu trả lời của bạn..." spellcheck="false" value=""></textarea>

              <i class="bar"></i>

            </div>

            <div class="input-group pd-10 checked w-100">

              <input class="checkbox" id="checkbox" name="checkbox" required="" type="checkbox">

              <label for="checkbox">Tôi đã đọc và đồng ý với <a href="/p/chinh-sach-noi-dung.html" title="chính sách và điều khoản trang web" rel="noopener" target="_blank">chính sách và điều khoản trang web</a></label>

            </div>

          </div>

        <div class="background-overlay hidden"></div>

        </div>

        <div class="modal--footer"><button class="modal--close" type="button">Hủy</button><button type="submit">Gửi</button></div>

      </div>

      <div class="_3em"></div>

    </form>

  </div>

</div>

Đọc thêm: Cách tạo hộp thoại modal popup contact form

Tiếp theo viết script cho hộp thoại modal auto popup

<script>//<![CDATA[

  $('#contact .modal--close').click(function(){ // Chọn click nút tắt hộp thoại

     localStorage.setItem('submitted','true')

  })

  $('#contact form').on('submit',function(){ // Chọn submitted form

    localStorage.setItem('submitted','true')

  })

  if(localStorage.getItem('submitted')!='true'){

    setTimeout(function(){

      $('#contact').show()

      $('#contact').find('.modal--confirm').fadeIn('slow',function(){

        $(this).addClass('show')

      })

      window.history.replaceState({path:url},'',url+'#contact')

    },4000)

  }

//]]></script>

Đặt nút mở hộp thoại nếu cần.

<a class="theme-button green modal--open" role="button" href="#contact" title="Liên hệ">Liên hệ</div>