如何通过'加入俱乐部”模式和淡出内容来鼓励注册-css教程-PHP中文网

首页

web前端

css教程

如何通过'加入俱乐部”模式和淡出内容来鼓励注册

DDD

Nov 27, 2024 am 07:39 AM

How to encourage signups with a

想象一下，浏览一个网站，瞥见一些遥不可及的有趣内容，并用一个简单的模式诱惑您“加入俱乐部”以无限制地访问。这种微妙而有效的设计激发了好奇心，同时鼓励行动。在本教程中，我们将使用 Nuxt 3 中的 PrimeVue 对话框组件构建这样的体验，并提供吸引用户的优雅内容淡入淡出效果。

注意：这可以很容易地用 vanilla JS 设计，或者不使用 PrimeVue。

让我们深入探讨如何打造这种迷人的模式体验，同时关注其心理效果——让用户预览一段内容，让加入俱乐部变得不可抗拒。

第 1 部分：目的和设置

目标很简单：当用户未登录时，显示“加入俱乐部”模式，同时淡入背景内容以暗示下面的内容。这种技术利用好奇心这一强大的动力来鼓励注册。

How to encourage signups with a

初始化组件

创建 join-the-club.vue 文件并设置基本脚本和模板：

<script setup>
const showLoginDialog = ref(true); // Controls the modal visibility
const email = ref(''); // Holds the user's email input

// Dynamic body class to manage overflow
const body_class = computed(() => ({
    overflow: showLoginDialog.value,
}));

// Join the club function (placeholder for now)
const joinClub = async () => {
    console.log('User email:', email.value);
};

// Placeholder function for sign-in click
const onSigninClicked = (event) => {
    console.log('Sign-in clicked');
};
</script>

登录后复制

在这里，我们定义：

showLoginDialog：一个反应变量，用于确定模式是否可见。
email：一个反应变量，用于捕获用户的电子邮件输入。
joinClub 和 onSigninClicked：用于处理操作的占位符函数。

第 2 部分：制作模态框

使用 PrimeVue 的 Dialog 组件，我们将创建一个优雅、非侵入性且目的驱动的模式。该模式提供了明确的行动号召并简化了决策过程。

添加模板

<template>
    <Body :class="body_class" />
    <!-- Background overlay with fade effect -->
    <div v-if="showLoginDialog">



<ul>
<li>
<strong>Content Preview</strong> : The gradient overlay provides a teaser of what’s underneath, enticing the user to explore.</li>
<li>
<strong>PrimeVue Dialog</strong> : This non-dismissable modal focuses the user’s attention while still being friendly.</li>
</ul>


<hr>

<p><strong>2220+ FREE</strong> <u><b><strong>RESOURCES</strong></b></u> <strong>FOR DEVELOPERS!! ❤️</strong> ?? <strong><sub><strong>(updated daily)</strong></sub></strong></p>

<blockquote>
<p>1400+ Free HTML Templates<br><br>
351+ Free News Articles<br><br>
67+ Free AI Prompts<br><br>
315+ Free Code Libraries<br><br>
52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!<br><br>
25+ Free Open Source Icon Libraries</p>
</blockquote>

<p>Visit dailysandbox.pro for free access to a treasure trove of resources!</p>


<hr>

<h3>
  
  
  Part 3: Styling for Engagement
</h3>

<p>Great functionality deserves great styling. Let’s add CSS to enhance the user experience.</p>

<h4>
  
  
  Styling the Overlay and Modal
</h4>



<pre class="brush:php;toolbar:false"><style lang="less" scoped>
.content-auth-overlay {
    position: fixed;
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 10%), rgba(255, 255, 255, 100%));
    z-index: 1000;
    pointer-events: all;
    opacity: 1;
}

.join-club {
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 100%;

    @media @mobile {
        flex-flow: column;
        align-items: normal;
        gap: 15px;
    }
}

.email-input {
    font-size: 1.2rem;
}

.email-control {
    font-size: 1rem;
    white-space: nowrap;
    overflow: unset;
    padding: 11px;
    margin-left: 10px;
}
</style>

登录后复制

叠加效果：线性渐变创建淡出效果，留下足够的可见度来吸引用户。
响应式设计：移动优先调整确保布局跨设备工作。
输入样式：干净、现代的输入和按钮设计增强了可用性。

第 4 部分：添加功能

joinClub 函数是该模式的核心。它将处理用户电子邮件提交并触发注册的后端逻辑。

添加加入功能

<script setup>
const showLoginDialog = ref(true); // Controls the modal visibility
const email = ref(''); // Holds the user's email input

// Dynamic body class to manage overflow
const body_class = computed(() => ({
    overflow: showLoginDialog.value,
}));

// Join the club function (placeholder for now)
const joinClub = async () => {
    console.log('User email:', email.value);
};

// Placeholder function for sign-in click
const onSigninClicked = (event) => {
    console.log('Sign-in clicked');
};
</script>

登录后复制

验证：确保在继续之前提供电子邮件。
模拟后端调用：用实际的 API 调用替换 console.log 来处理注册。
关闭模态框：成功后，隐藏模态框以让用户探索该网站。

第 5 部分：将它们结合在一起

现在，将 join-the-club.vue 组件集成到您的主应用程序中。例如，您可以根据用户的身份验证状态有条件地导入和使用它：

<template>
    <Body :class="body_class" />
    <!-- Background overlay with fade effect -->
    <div v-if="showLoginDialog">



<ul>
<li>
<strong>Content Preview</strong> : The gradient overlay provides a teaser of what’s underneath, enticing the user to explore.</li>
<li>
<strong>PrimeVue Dialog</strong> : This non-dismissable modal focuses the user’s attention while still being friendly.</li>
</ul>


<hr>

<p><strong>2220+ FREE</strong> <u><b><strong>RESOURCES</strong></b></u> <strong>FOR DEVELOPERS!! ❤️</strong> ?? <strong><sub><strong>(updated daily)</strong></sub></strong></p>

<blockquote>
<p>1400+ Free HTML Templates<br><br>
351+ Free News Articles<br><br>
67+ Free AI Prompts<br><br>
315+ Free Code Libraries<br><br>
52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!<br><br>
25+ Free Open Source Icon Libraries</p>
</blockquote>

<p>Visit dailysandbox.pro for free access to a treasure trove of resources!</p>


<hr>

<h3>
  
  
  Part 3: Styling for Engagement
</h3>

<p>Great functionality deserves great styling. Let’s add CSS to enhance the user experience.</p>

<h4>
  
  
  Styling the Overlay and Modal
</h4>



<pre class="brush:php;toolbar:false"><style lang="less" scoped>
.content-auth-overlay {
    position: fixed;
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 10%), rgba(255, 255, 255, 100%));
    z-index: 1000;
    pointer-events: all;
    opacity: 1;
}

.join-club {
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 100%;

    @media @mobile {
        flex-flow: column;
        align-items: normal;
        gap: 15px;
    }
}

.email-input {
    font-size: 1.2rem;
}

.email-control {
    font-size: 1rem;
    white-space: nowrap;
    overflow: unset;
    padding: 11px;
    margin-left: 10px;
}
</style>

登录后复制