如何透過「加入俱樂部」模式和淡出內容來鼓勵註冊-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>
    </template>
    <!-- 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>
    </template>
    <!-- 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>