更改模式弹出式触发器从按钮点击到页面加载

Question

我在我的页面上有一个模式。目前，当您按下按钮时，它会弹出。不过，我希望它在页面加载时弹出。理想情况下，它只会在用户第一次访问该网站时弹出。

的片段：

// Popup Window 
 
var scrollTop = ''; 
 
var newHeight = '100'; 
 

 
$(window).bind('scroll', function() { 
 
    scrollTop = $(window).scrollTop(); 
 
    newHeight = scrollTop + 100; 
 
}); 
 

 
$('.popup-trigger').click(function (e) { 
 
    e.stopPropagation(); 
 
    if (jQuery(window).width() < 767) { 
 
     $(this).after($(".popup")); 
 
     $('.popup').show().addClass('popup-mobile').css('top', 0); 
 
     $('html, body').animate({ 
 
      scrollTop: $('.popup').offset().top 
 
     }, 500); 
 
    } else { 
 
     $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle(); 
 
    } 
 
    ; 
 
}); 
 

 
$('html').click(function() { 
 
    $('.popup').hide(); 
 
}); 
 

 
$('.popup-btn-close').click(function (e) { 
 
    $('.popup').hide(); 
 
}); 
 

 
$('.popup').click(function (e) { 
 
    e.stopPropagation(); 
 
});

.popup-trigger { 
 
    display: block; 
 
    margin: 0 auto; 
 
    padding: 20px; 
 
    max-width: 260px; 
 
    background: #4EBD79; 
 
    color: #fff; 
 
    font-size: 18px; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    line-height: 24px; 
 
    cursor: pointer; 
 
} 
 

 
.popup { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 50%; 
 
    width: 700px; 
 
    margin-left: -350px; 
 
    padding: 50px 30px; 
 
    background: #fff; 
 
    color: #333; 
 
    font-size: 19px; 
 
    line-height: 30px; 
 
    border: 10px solid #150E2D; 
 
    z-index: 9999; 
 
} 
 

 
.popup-mobile { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    margin: 30px 0 0; 
 
    width: 100%; 
 
} 
 

 
.popup-btn-close { 
 
    position: absolute; 
 
    top: 8px; 
 
    right: 14px; 
 
    color: #4EBD79; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<a class="popup-trigger">Open Pop Up</a> 
 

 
<div class="main"> 
 
    Page text 
 
</div> 
 

 
<div class="popup"> 
 
    Modal Text 
 
    <span class="popup-btn-close">close</span> 
 
</div>

我不想再使用popup-trigger按钮，我只是想有模态显示在页面加载时。

我试图与更换 $('.popup-trigger').click(function(e) {

： $(document).load(function() {

没有运气。

任何想法？此外，我刚刚进入cookie，但不知道他们如何工作。我如何拥有这样的网站才能在某个时间段内第一次访问网站，例如每天。

Answer 1

您可以通过存储cookie信息（检查用户的第一个visite）来执行此操作，并在检查cookie后使用jquery准备在启动时打开poupu。

在这里你可以找到一个Fiddle（堆栈段不给使用Cookie，跑小提琴两次许可，则pupup将会消失）

PS：我已经创建秀弹出功能，防止重复代码，我也删除了// $ (this).after($(".popup"));这行删除div弹出窗口??！

而且我用jQuery的饼干LIB访问和等饼干

在这里看到的代码

JS：

var scrollTop = ''; 
var newHeight = '100'; 

$(function() { 
    console.log($.cookie("openPop")); 
    if($.cookie('openPop')){ 
     $.cookie('openPop',false); 
     showPopup(); 
    } 
    else 
     $.cookie('name',true); 
}); 

$(window).bind('scroll', function() { 
    scrollTop = $(window).scrollTop(); 
    newHeight = scrollTop + 100; 
}); 

$('.popup-trigger').click(function(e) { 
    e.stopPropagation(); 
    showPopup(); 
}); 


function showPopup() { 
    scrollTop = $(window).scrollTop(); 
    newHeight = scrollTop + 100; 

    if (jQuery(window).width() < 767) { 
    //$(this).after($(".popup")); 
    $('.popup').show().addClass('popup-mobile').css('top', 0); 
    $('html, body').animate({ 
     scrollTop: $('.popup').offset().top 
    }, 500); 
    } else { 
    $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle(); 
    }; 
} 

$('html').click(function() { 
    $('.popup').hide(); 
}); 

$('.popup-btn-close').click(function(e) { 
    $('.popup').hide(); 
}); 

$('.popup').click(function(e) { 
    e.stopPropagation(); 
}); 

CSS：

.popup-trigger { 
    display: block; 
    margin: 0 auto; 
    padding: 20px; 
    max-width: 260px; 
    background: #4EBD79; 
    color: #fff; 
    font-size: 18px; 
    font-weight: 700; 
    text-align: center; 
    text-transform: uppercase; 
    line-height: 24px; 
    cursor: pointer; 
} 

.popup { 
    display: none; 
    position: absolute; 
    top: 100px; 
    left: 50%; 
    width: 700px; 
    margin-left: -350px; 
    padding: 50px 30px; 
    background: #fff; 
    color: #333; 
    font-size: 19px; 
    line-height: 30px; 
    border: 10px solid #150E2D; 
    z-index: 9999; 
} 

.popup-mobile { 
    position: relative; 
    top: 0; 
    left: 0; 
    margin: 30px 0 0; 
    width: 100%; 
} 

.popup-btn-close { 
    position: absolute; 
    top: 8px; 
    right: 14px; 
    color: #4EBD79; 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
    cursor: pointer; 
} 

HTML：

<src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<a class="popup-trigger">Open Pop Up</a> 

<div class="main"> 
    Page text 
</div> 

<div class="popup"> 
    Modal Text 
    <span class="popup-btn-close">close</span> 
</div> 

Answer 2

而不是增加点击的听众，你为什么不尝试的onload后直接调用$('.popup').show()。 检查这个小提琴，希望它适合你。 https://jsfiddle.net/kajalc/h4fomm5q/

如果这没问题，那么可以从脚本中删除按钮及其事件。

Answer 3

删除使用按钮来触发模态。 检查它，如果它适合你。

// Popup Window 
 
    var scrollTop = ''; 
 
    var newHeight = '100'; 
 
    if (jQuery(window).width() < 767) { 
 
    $('.popup').show().addClass('popup-mobile').css('top', 0); 
 
    $('html, body').animate({ 
 
     scrollTop: $('.popup').offset().top 
 
    }, 500); 
 
    } else { 
 
    $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle(); 
 
    } 
 

 
    $(window).bind('scroll', function() { 
 
    scrollTop = $(window).scrollTop(); 
 
    newHeight = scrollTop + 100; 
 
    }); 
 

 
    $('.popup-btn-close').click(function(e) { 
 
    $('.popup').hide(); 
 
    });

 

 
.popup { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 50%; 
 
    width: 700px; 
 
    margin-left: -350px; 
 
    padding: 50px 30px; 
 
    background: #fff; 
 
    color: #333; 
 
    font-size: 19px; 
 
    line-height: 30px; 
 
    border: 10px solid #150E2D; 
 
    z-index: 9999; 
 
} 
 

 
.popup-mobile { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    margin: 30px 0 0; 
 
    width: 100%; 
 
} 
 

 
.popup-btn-close { 
 
    position: absolute; 
 
    top: 8px; 
 
    right: 14px; 
 
    color: #4EBD79; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main"> 
 
    Page text 
 
</div> 
 

 
<div class="popup"> 
 
    Modal Text 
 
    <span class="popup-btn-close">close</span> 
 
</div>