jquery克隆_使用jQuery创建选择加入的怪物克隆

最新推荐文章于 2024-10-06 20:16:20 发布

dingshi7798

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量76

点赞数

文章标签： java python javascript js css ViewUI

原文链接：https://www.sitepoint.com/creating-opt-monster-clone-jquery/

版权

jquery克隆

毫无疑问，构建电子邮件列表的最有效方法是创建一种模式，当访问者偶然发现您的网站时就会显示该模式。然后，此模式将包含他们根本无法忽略的选择加入形式（通常是通过诱人的贿赂来移交电子邮件，例如某种形式的免费下载）。这种方法并非没有争议，而是：

它们仍然非常有效。
抱怨来自少数人。

要创建这些模式，大多数人使用第三方软件，例如Opt-in Monster ， LeadPages或SumoMe的List Builder插件。但是，尽管这些应用程序很方便，但它们并非总是最佳选择，正如我们将在本教程中讨论的那样，它们很容易用jQuery替换。

这是如何做。

步骤1：安装jQuery

首先，下载jQuery副本并将其嵌入网页中。为了节省一点时间，请随时嵌入jQuery的外部副本：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

接下来，我们需要向页面添加两个不同的jQuery插件：

第一个插件是jQuery Modal插件。这就是我们可以用来创建在用户访问我们的页面之后出现的模式框的方式。将插件添加到您的项目时，请确保下载所有文件：

jquery.modal.min.js
jquery.modal.css
close.png
spinner.gif

您可以使用其他模式插件（或自定义模式）来遵循本教程，但是我发现jQuery Modal插件是最简单的选择。

第二个插件是jQuery Cookie插件。这就是我们要使用的方法，以便当用户单击模式上的“关闭”按钮时，他们在接下来的30天里不会再次看到该模式。这表示：

每个人至少应该看到一次模态。
回访者不会在每次访问时都看到该模式。

依靠cookie并不是一种万无一失的方法，但已经足够了。

设置jQuery本身以及这些插件之后，您应该拥有一个类似于以下内容HTML文件：

<html>
    <head>
        <title>jQuery Demo</title>
        <link rel="stylesheet" href="css/jquery.modal.css">
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.modal.min.js"></script>
        <script src="js/jquery.cookie.min.js"></script>
    </head>
    <body>
    </body>
</html>

在body标签之间，输入以下内容：

<div id="opt-in" style="display:none;">
    <form>
        <input type="email" placeholder="Your email goes here...">
        <input type="submit" value="Free Instant Access!">
    </form>
</div>

这是我们的模态。当用户访问页面时，将显示该框。当前的形式看起来并不那么出色，但这没关系。但是，值得一提的几件事：

我们的模式需要唯一的ID供我们参考。在这种情况下，我为模式指定了“选择加入”的ID。
我们将display属性设置为“ none”，因此模式不会出现在主界面中。它只会在被调用时出现。

在此代码下面，在body结束标记之前，编写一个将在页面加载后执行的函数：

<script type="text/javascript">
$(window).load(function() {
    // code that'll run when the page loads
}
</script>

然后，要使模式出现在页面加载时，我们可以使用jQuery Modal插件提供给我们的modal函数：

<script type="text/javascript">
$(window).load(function() {
    // make the modal appear
    $('#opt-in').modal();
});
</script>

保存文件并刷新浏览器中的页面后，模态应出现：

模态示例

但是我们不希望该模式立即出现。最好是在用户访问页面后稍有延迟。为此，我们可以编写一个setTimeout函数，如下所示：

setTimeout(function() {
    // this code will execute after 7 seconds
}, 7000);

第一个参数是我们要执行的功能，第二个参数是延迟（以毫秒为单位）。

与模式结合使用时，代码将类似于：

$(window).load(function() {
    // delay by 7 seconds
    setTimeout(function(){
        // make the modal appear
        $('#opt-in').modal();
    }, 7000);
});

步骤3：管理Cookie

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

当用户单击模式的“关闭”按钮时，我们不希望他们在30天后再次看到该模式。这使得模态变得不那么烦人了。

为此，请使其在用户单击“关闭”按钮时执行功能。该按钮可以用.close-modal类引用，并且此函数可以放在load函数的底部：

$('.close-modal').click(function(){
    console.log("Modal closed.");
});

因此，代码应类似于：

$(window).load(function() {
    // delay by 7 seconds
    setTimeout(function(){
        // make the modal appear
        $('#opt-in').modal();
    }, 7000);
    // when the "Close" button is clicked
    $('.close-modal').click(function(){
        console.log("Modal closed.");
    });
});

然后在这个新函数中，我们将创建一个cookie：

$('.close-modal').click(function(){
    // create a cookie
    $.cookie('hideTheModal', 'true');
});

在此，cookie名为hideTheModal ，并且包含值为true 。我们还可以通过expires选项来定义cookie的持续时间：

$('.close-modal').click(function(){
    // create a cookie
    $.cookie('hideTheModal', 'true', { expires: 30 });
});

不过，重要的一点是Google Chrome不支持本地文件的cookie。这意味着您将需要通过Safari或Firefox之类的浏览器测试此基于cookie的功能。

有了此cookie后，我们现在可以编写以下条件：

var hideTheModal = $.cookie('hideTheModal');
if(hideTheModal == null){
    // modal appears
} else {
    // modal doesn't appear
}

因此，在上下文中，代码应类似于：

$(window).load(function() {
    var hideTheModal = $.cookie('hideTheModal');
    // if the cookie hasn't been set...
    if(hideTheModal == null){
        // delay by 7 seconds
        setTimeout(function(){
            // make the modal appear
            $('#opt-in').modal();
        }, 7000);
        // when the "Close" button is clicked
        $('.close-modal').click(function(){
            // set the cookie
            $.cookie('hideTheModal', 'true', { expires: 30 });
        });
    }
});

然后，这仅仅是设计外观更好的模态，还要对不同的设计进行拆分测试，以查看它们如何影响选择率。但是，这些精确的主题当然不在本教程的讨论范围之内。