मैं 2500 की स्क्रॉल स्थिति पर एक पॉपअप दिखाना चाहता हूं। लेकिन जब मैं उस स्थिति में स्क्रॉल करता हूं तो पॉपअप प्रदर्शित होता है और जब मैं इसे बंद करता हूं। फिर से प्रदर्शित होता है। मैं स्क्रॉल स्थिति पर एक बार पॉपअप कैसे दिखा सकता हूं?

कोई सुझाव?

const showWinBiryaniPopup = () => {
  let showPopup = true;
  if ($(document).scrollTop() >= 2500 && showPopup) {
    $('#win-biryani-modal').modal('show');
    showPopup = false;
  } else {
    $('#win-biryani-modal').modal('hide');
  }
};
showWinBiryaniPopup();
0
yikemop651 10 सितंबर 2020, 10:06

1 उत्तर

सबसे बढ़िया उत्तर

एक flag रखें जो दायरे की श्रृंखला में ऊपर हो। पॉपअप दिखाए जाने के बाद flag को हटा दें या रीसेट करें। यहां एक उदाहरण दिया गया है जो स्क्रॉल तक सीमित है:

  var shownPopup = false;
  $(window).scroll(function () {
    if ($(window).scrollTop() > 300 && !shownPopup) {
      showPopup = true;
      alert("Popping up only once!");
      $(window).off("scroll");
    }
  });

वर्किंग डेमो

$(function () {
  var shownPopup = false;
  $(window).scroll(function () {
    if ($(window).scrollTop() > 300) {
      showPopup = true;
      alert("Popping up only once!");
      $(window).off("scroll");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo alias repellendus quisquam. Quam nihil tempora sint, hic qui eligendi, tenetur quia! Beatae illum consectetur, assumenda suscipit culpa, ab nam aliquam.</p>
<p>Voluptatibus tenetur id tempore nobis ex, optio facere quia, cupiditate cum repellendus reprehenderit nihil illum mollitia deleniti doloribus ad quaerat expedita! Quis dolor eaque natus praesentium aliquid consequuntur cumque officiis.</p>
<p>Molestiae repudiandae alias cumque repellendus. Praesentium voluptas non id ducimus corporis nesciunt numquam pariatur qui soluta exercitationem unde incidunt in, itaque tempore dignissimos obcaecati maxime laborum debitis tenetur similique beatae.</p>
<p>Quos optio ipsa, voluptatem dolorum illum architecto perspiciatis minus error, impedit aliquid totam fugit vitae enim possimus nobis ut accusamus facere temporibus vero explicabo! Ullam iure nobis ea qui nisi!</p>
<p>Corporis aspernatur quas beatae numquam temporibus, nulla reiciendis laborum quia, officia incidunt saepe suscipit alias, minus ducimus tempora sint impedit nihil id! Asperiores sapiente, inventore enim eius debitis voluptas reprehenderit!</p>
<p>Sed nostrum voluptatibus aperiam, officiis fugiat eos asperiores iste quaerat magnam quidem provident dolorum iure consectetur accusantium neque in, blanditiis quas explicabo nisi quo laudantium dolor alias, vero repudiandae? Laboriosam!</p>
<p>Facere, soluta fugiat rerum, delectus dolore blanditiis provident? Accusamus ratione libero amet, beatae aliquid obcaecati tenetur, suscipit at est nisi iste. Corporis laboriosam at explicabo facere quia ipsam magnam nesciunt.</p>
<p>Laudantium perspiciatis perferendis quo velit maxime ducimus. Voluptatum earum iusto laboriosam, vel quaerat doloremque dignissimos totam molestiae, nostrum quia iste ea. Nobis molestias, quibusdam deserunt nostrum sunt, odio quae cum.</p>
<p>Atque, maxime cum quas doloribus corporis doloremque vero perferendis eaque ratione error iusto dignissimos iste ea aliquid quaerat deleniti, veniam, minus, non vel voluptas aliquam accusamus laudantium recusandae molestias facilis.</p>
<p>Porro dolores, consectetur ut expedita, aut, nam ea autem saepe vel veniam nobis maiores quod, quibusdam. Sunt, omnis. Eos corrupti itaque, totam quia, eum alias vero voluptas esse incidunt exercitationem.</p>
<p>Quam, accusantium corrupti soluta, obcaecati eveniet repellat voluptates, officiis eos architecto provident fugiat rerum eaque. Alias reiciendis, quae quos voluptatibus dolore aperiam incidunt illo amet reprehenderit. Qui accusantium porro totam.</p>
<p>Est earum, aliquid. Recusandae aliquid delectus asperiores laudantium corporis eum quaerat? Praesentium commodi molestiae, aperiam laboriosam perferendis facere atque mollitia. Dignissimos deleniti, placeat temporibus vel quos quam iure excepturi error.</p>
<p>Eum quisquam fugit ratione beatae dicta commodi quidem magni, aspernatur harum vero, repudiandae atque fuga praesentium ipsa nihil et at architecto mollitia nesciunt dolore illum. Illum veritatis amet provident velit.</p>
<p>Cupiditate magnam dolor at aspernatur odio quas, odit in et dignissimos? Quibusdam in, dolor magni ipsum, deserunt illo asperiores, voluptate illum explicabo, quo totam tempore iste rem! Dolor dolorem, itaque.</p>
<p>Sit voluptatibus, obcaecati! Quas, accusamus laborum. Voluptas adipisci quos eius nulla reprehenderit, praesentium deleniti explicabo! Expedita voluptas, nam officiis ullam incidunt perspiciatis vero nisi iste iusto. Expedita fugiat, quaerat error!</p>

सुरक्षा के लिए, मैं ईवेंट श्रोता को भी हटा रहा हूं एक बार स्क्रॉल करने पर भी!

3
Praveen Kumar Purushothaman 10 सितंबर 2020, 10:11