Question

我正在尝试退出时弹出窗口。我遵循了很多教程，都采取了自己的主动行动，但仍然无法正常工作。（对于jQuery来说是相当新的，如果很明显，对不起）。只是想知道是否有人可以识别我在做什么错？

根据控制台，此行是一个问题：$.magnificPopup.open({错误消息：“未捕获的TypeError：无法读取未定义的属性'open'”

            // Exit intent
function addEvent(obj, evt, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false);
  } else if (obj.attachEvent) {
    obj.attachEvent("on" + evt, fn);
  }
}

// Exit intent trigger
addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement === null && evt.relatedTarget === null && !localStorage.getItem('exitintent_show')) {
    $.magnificPopup.open({
      items: {
        src: '#newsletter-form' //ID of inline element
      },
      type: 'inline',
      removalDelay: 500, //Delaying the removal in order to fit in the animation of the popup
      mainClass: 'mfp-fade mfp-fade-side', //The actual animation
    });
    //localStorage.setItem('exitintent_show', 'true'); // Set the flag in localStorage
  }
});

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
  > * {
    margin-top: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        
        
        
<!--Delayed Popup-->
<div id="newsletter-form" class="white-popup mfp-hide">
  <h2>Subscribe to my articles</h2>
  <p>I promise I won't bug you much, just a heads up for whenever I publish anything new.</p>
</div>

Answer 1

我在这里使用了神奇的弹出窗口。

    <!--=================================
    modal -->
    
    <section class="white-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="modal-onexit" data-target="#myModal1"></div>
                    <div class="modal1 mfp-hide text-center" id="myModal1">
                        <div class="modal-shop white-bg">
                            @*<span class="theme-color">Winter offer for new user</span>*@
                            <h3 class="theme-color">Request for call back to know Exclusive offer</h3>
                            <form action="YOUR-ACTION" method="post">
                                <div class="row no-gutter mt-50">
                                    <div class="col-sm-12 mb-10">
                                        <input type="text" placeholder="Name*" class="form-control placeholder" required autocomplete="off">
                                    </div>
                                    <div class="col-sm-12 mb-10">
                                        <input type="email" placeholder="Email*" class="form-control placeholder" required autocomplete="off">
                                    </div>
                                    <div class="col-sm-12 mb-10">
                                        <input type="number" placeholder="Phone*" class="form-control placeholder" required autocomplete="off">
                                    </div>
                                    <div class="col-sm-12 mb-10">
                                        <textarea type="text" placeholder="Message*" class="form-control placeholder" required></textarea>
                                    </div>
                                    <div class="col-md-12 mt-30">
                                        <button type="submit" class="button">Get my Exclusive Offer</button>
                                    </div>
                                </div>
                            </form>
                            <span class="theme-color mt-20 mb-20"> <a class="popup-modal-dismiss" href="#">No Thanks, I don't want any offer! </a> </span>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!--=================================
    modal -->
    
    
    
        <script>
            // Exit intent
            function addEvent(obj, evt, fn) {
                if (obj.addEventListener) {
                    obj.addEventListener(evt, fn, false);
                }
                else if (obj.attachEvent) {
                    obj.attachEvent("on" + evt, fn);
                }
            }
    
            // Exit intent trigger
            addEvent(document, 'mouseleave', function (evt) {
                var $modal = $('.modal-onexit');
                if ($modal.length > 0) {
                    $('.popup-modal').magnificPopup({
                        type: 'inline'
                    });
                    $(document).on('click', '.popup-modal-dismiss', function (e) {
                        e.preventDefault();
                        $.magnificPopup.close();
                    });
                    var elementTarget = $modal.attr('data-target');
                    setTimeout(function () {
                        $.magnificPopup.open({
                            items: { src: elementTarget },
                            type: "inline",
                            mainClass: "mfp-no-margins mfp-fade",
                            closeBtnInside: !0,
                            fixedContentPos: !0,
                            removalDelay: 500
                        }, 0)
                    }, 0);
                }
    
            });
    
       </script>

退出弹出窗口不触发

1 个答案: