Responsive & Customizable PopUp

Seamless Navigation with Style

The PopUp component offers a clean and responsive way to display additional content, alerts, forms, or actions without navigating away from the current page. It is designed to enhance user interaction and works seamlessly across all devices.

Key Features:

Fully Responsive: Our PopUp automatically adjusts to different screen sizes, providing a smooth and consistent experience across all devices.
Easily Customizable: Tailor the appearance and behavior of the PopUp to fit your brand's style. With extensive customization options, you can modify colors, fonts, spacing, and animations effortlessly.
Smooth Animations: Enhance user interaction with smooth transitions and hover effects that make navigation engaging and enjoyable.
Simple Integration: Integrating our PopUp into your website is straightforward, with clean and well-documented code that makes setup a breeze.
Cross-Browser Compatibility: Our PopUp is tested to work seamlessly across all major browsers, ensuring that your users get the best experience regardless of their preferred platform.

Static Modal

A Static Modal is a fixed-position popup that overlays the main content of the webpage. Unlike dynamic modals that open or close based on user actions like button clicks, a static modal is typically displayed by default or under specific conditions and remains visible until manually dismissed or a specific action is taken.

Key Features

Manual trigger: Pop Up can be triggered by pressing a button.
Styling: Easy to Style and postion and style the pop up.
Custom Actions: Success or Fail actions can be easliy customised.

Note

The Pop Up is triggered by calling the CePp() fuction.
Pass object staticModalinto CePp() function to access this pop up.
For Customising the webpage we have to pass classes into the Modal object in the classes property.
You can set auto close by adding time (in milliseconds) to the autoclose property in object.
Add CloseBtn class for close button which when clicked on closes the popup.

Title

×

Woohoo, welcome to celebrate tech modern ui modal.

Source Code


<div id="staticModal" class="ModalCT">

    <div class="BrBm2 CrBrGy90Lt PgTmBm10 DyFx FxJyCtSeBn FxAnIsCr Pg15">
        <h3 class="FtSe22">Title</h3>
        <span class="CloseBtn FtSe25 CrurPr FtWt600">&times;</span>
    </div>

    <div class="BrBm2 CrBrGy90Lt Pg15">
        <p class="FtSe16 Mn0">Woohoo, welcome to celebrate tech modern ui modal.</p>
        <p class="FtSe16 Mn0">Woohoo, welcome to celebrate tech modern ui modal.</p>
        <p class="FtSe16 Mn0">Woohoo, welcome to celebrate tech modern ui modal.</p>
    </div>

    <div class="DyFx FxJyCtFxEd Pg15">
        <button class="ModalFailBtn Bn CrBrRd CrBdRd50Lt CrWe MnLt2 MnRt2">No</button>
        <button class="ModalSuccessBtn Bn CrBrBe CrBdBe CrWe MnLt2 MnRt2">Yes</button>
        <button id="staticModalCloseByIdButton" class="Bn CrBrBe CrBdBe CrWe MnLt2 MnRt2">Close By Id</button>
    </div>

</div>

<div class="DyFx Pg10 FxJyCtSt Wh100p">
    <button id="staticModalBtn" class="Bn CrBrBe CrBdBe CrWe">Launch Modal</button>
</div>


// static modal 
const staticModalObj = {
    id: 'staticModal',
    autoClose: 0, // 0 means no auto close
    classes: {
        ModalCT: 'slideDownFadeIn CrBdWe BrRs5 Wh95vw Sl:Wh70vw Mm:Wh40vw MnLtAo MnRtAo MnTp20',
    },

    onSuccess: () => {
        console.log('on success called')
    },

    onFail: () => {
        console.log('on close called')
    },
    backgroundColor: 'rgba(0, 0, 0, 0.6)', // you can change background color
    zIndex: 1000000000, // you can change z index
}

document.addEventListener('DOMContentLoaded', async () => {
    document.getElementById('staticModalBtn').addEventListener('click', () => {
        CT.CePp(staticModalObj);
    })

    const staticModalCloseByIdButton = document.getElementById('staticModalCloseByIdButton');
    if (staticModalCloseByIdButton) {
        staticModalCloseByIdButton.addEventListener('click', () => {
            CT.CePpById({
                id: 'staticModal',
            }); // close pop up by id
        });
    }
})

Form Modal

The Form Modal is a popup component that appears as an overlay on top of the main content. It is typically used to display interactive forms, gather user input, or present additional information without redirecting the user to a new page. This modal requires user interaction, such as submitting the form, canceling, or manually closing the popup.

Key Features

Pop Up form: Pop Up contains input fields so it can be used for
Manual trigger: Pop Up can be triggered by pressing a button.
Styling: Easy to Style and postion and style the pop up.
Custom Actions: Success or Fail actions can be easliy customised.

Note

The Pop Up is triggered by calling the CePp() fuction.
Pass object formModalObj into CePp() function to use this popup.
For Customising the webpage we have to pass classes into the Modal object in the classes property.
You can set auto close by adding time (in milliseconds) to the autoclose property in object.
Add CloseBtn class for close button which when clicked on closes the popup.

Sign in to our platform

×

Source Code


<div id="formModal" class="ModalCT">

    <div class="BrBm2 CrBrGy90Lt PgTp20 PgBm20 DyFx FxJyCtSeBn FxAnIsCr Pg15">
        <h3 class="FtSe22 CrWe">Sign in to our platform</h3>
        <span class="CloseBtn FtSe25 CrurPr FtWt600 CrWe">&times;</span>
    </div>

    <div class="CrBrGy90Lt Pg15">
        <form action="#">
            <label for="email" class="DyBk MnBm10 CrWe">Your email</label>
            <input type="email" id="email" name="email" placeholder="name@company.com" class="Wh100p Pg10 MnBm10 CrBk BrRs10 FtSe16" required>

            <label for="password" class="DyBk MnBm10 CrWe">Your password</label>
            <input type="password" id="password" name="password" class="Wh100p Pg10 MnBm10 CrBk BrRs10 FtSe16" required>

            <button type="submit" class="Bn CrBrBe CrBdBe CrWe MnTp20">Login to your account</button>
        </form>
    </div>

</div>

<div class="DyFx Pg10 FxJyCtSt Wh100p">
    <button id="formModalBtn" class="Bn CrBrBe CrBdBe CrWe">Launch Modal</button>
</div>


// form modal
const formModalObj = {
    id: 'formModal',                
    autoClose: 0, // 0 means no auto close
    classes: {
        ModalCT: 'slideDownFadeIn CrBdBk10Lt BrRs5 Wh95vw Sl:Wh70vw Mm:Wh40vw MnLtAo MnRtAo MnTp20',
    },

    onSuccess: () => {
        console.log('on success called')
    },

    onFail: () => {
        console.log('on close called')
    },
}

document.addEventListener('DOMContentLoaded', async () => {
    document.getElementById('formModalBtn').addEventListener('click', () => {
        CT.CePp(formModalObj);
    })
})

Scrollable Modal

The Scrollable Modal is designed to handle large volumes of content while maintaining a compact and user-friendly layout. This modal introduces a scrollable body section, allowing users to access extended information without compromising the overall UI structure or screen space.

Key Features

Scroll-enabled Content Area
Static Header and Footer
Manual Control with Buttons
Custom JavaScript Events for onSuccess and onFail
Responsive Design across screen sizes

Note

The Pop Up is triggered by calling the CePp() fuction.
Pass object scrollableModalObj into CePp() function.
For Customising the webpage we have to pass classes into the Modal object in the classes property.
You can set auto close by adding time (in milliseconds) to the autoclose property in object.
Add CloseBtn class for close button which when clicked on closes the popup.

Title

×

Woohoo, you're reading this text in a modal!

Lorem ipsum dolor sit amet... (add 10-15 paragraphs here)

More content...

Source Code


<!-- Scrollable Modal -->
<div id="scrollableModal" class="ModalCT">

    <!-- Modal Heading -->
    <div class="BrBm2 CrBrGy90Lt PgTp20 PgBm20 DyFx FxJyCtSeBn FxAnIsCr Pg15">
        <h3 class="FtSe22">Title</h3>
        <span class="CloseBtn FtSe25 CrurPr FtWt600">&times;</span>
    </div>

    <!-- Modal Body -->
    <div class="BrBm2 CrBrGy90Lt Pg15 OwAo HtMx60vh">
        <p class="FtSe16 Mn0">Woohoo, you're reading this text in a modal!</p>
        <!-- Scrollable Content -->
        <p>Lorem ipsum dolor sit amet... (add 10-15 paragraphs here)</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <p>More content...</p>
        <!-- Repeat content to enable scrolling -->
    </div>

    <!-- Modal Footer -->
    <div class="DyFx FxJyCtFxEd Pg15">
        <button class="ModalFailBtn Bn CrBrRd CrBdRd50Lt CrWe MnLt2 MnRt2">No</button>
        <button class="ModalSuccessBtn Bn CrBrBe CrBdBe CrWe MnLt2 MnRt2">Yes</button>
    </div>
</div>

<!-- Button -->
<div class="DyFx Pg10 FxJyCtSt Wh100p">
    <button id="scrollableModalBtn" class="Bn CrBrBe CrBdBe CrWe">Launch Modal</button>
</div>


// scrollable modal
const scrollableModalObj = {
    id: 'scrollableModal',                
    autoClose: 0, // 0 means no auto close
    classes: {
        ModalCT: 'ModalCT CrBdWe Pg10 BrRs20 Wh95vw Sl:Wh70vw Mm:Wh40vw HtMx95vh MnLtAo MnRtAo MnTp20',
    },

    onSuccess: () => {
        console.log('on success called')
    },

    onFail: () => {
        console.log('on close called')
    },
}

document.addEventListener('DOMContentLoaded', async () => {
    document.getElementById('scrollableModalBtn').addEventListener('click', () => {
        CT.CePp(scrollableModalObj)
    });
});

Success Modal

The Success Modal is a feedback-oriented popup used to inform users that an action or process has been successfully completed. It provides visual confirmation—often through a success message or icon—and typically does not require further user interaction.

Key Features

Clear Confirmation Message
Optional Auto-Close Behavior
Minimal Interaction Needed
Customizable Appearance and Duration

Note

The Pop Up is triggered by calling the CePp() fuction.
Pass object successModalObj into CePp() function to use this popup.
For Customising the webpage we have to pass classes into the Modal object in the classes property.
You can set auto close by adding time (in milliseconds) to the autoclose property in object.
Add CloseBtn class for close button which when clicked on closes the popup.

Success

Congratulations! Your action was completed successfully.

Source Code


<!-- Modal -->
<div id="successModal" class="ModalCT">

    <!-- Modal Icon -->
    <div class="TtAnCr Pg15">
        <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- Green background circle -->
            <circle cx="50" cy="50" r="50" fill="#4CAF50" />

            <!-- White tick -->
            <path d="M20 50 L40 70 L80 30" stroke="white" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </div>


    <!-- Modal Heading -->
    <div class="BrBm2 CrBrGy90Lt PgTp20 PgBm20 DyFx FxJyCtCr FxAnIsCr">
        <h3 class="FtSe22">Success</h3>
    </div>

    <!-- Modal Body -->
    <div class="BrBm2 CrBrGy90Lt PgTp10 PgBm20">
        <p class="FtSe16 FtWt500 TtAnCr">Congratulations! Your action was completed successfully.</p>
    </div>

    <!-- Modal Footer -->
    <div class="DyFx FxJyCtCr Pg15">
        <button class="ModalSuccessBtn Bn CrBrWe CrWe MnLt2 MnRt2 Wh60p" style="background: #4CAF50; border-radius: 10px; padding: 10px;">OK</button>
    </div>

</div>

<!-- Button to Launch Modal -->
<div class="DyFx Pg10 FxJyCtSt Wh100p">
    <button id="successModalBtn" class="Bn CrBrBe CrBdBe CrWe">Show Success Modal</button>
</div>


// success modal
const successModalObj = {
    id: 'successModal',                
    autoClose: 2000, // 0 means no auto close
    classes: {
        ModalCT: 'slideDownFadeIn CrBdWe BrRs5 Wh95vw Sl:Wh70vw Mm:Wh40vw MnLtAo MnRtAo MnTp20',
    },

    onSuccess: () => {
        console.log('on success called')
    },

    onFail: () => {
        console.log('on close called')
    },
}

document.addEventListener('DOMContentLoaded', async () => {
    document.getElementById('successModalBtn').addEventListener('click', () => {
        CT.CePp(successModalObj)
    });
});

Failed Modal

The Failed Modal is used to inform users when an action or process fails. It provides immediate visual feedback along with a message that communicates the failure. This modal is typically used for error handling, form submission issues, or system alerts.

Key Features

Clear Confirmation Message
Optional Auto-Close Behavior
Minimal Interaction Needed
Customizable Appearance and Duration

Note

The Pop Up is triggered by calling the CePp() fuction.
Pass object failedModalObj into CePp() function to use this popup.
For Customising the webpage we have to pass classes into the Modal object in the classes property.
You can set auto close by adding time (in milliseconds) to the autoclose property in object.
Add CloseBtn class for close button which when clicked on closes the popup.

Failed

Opps! Your action was not completed.

Source Code


<!-- Modal -->
<div id="failedModal" class="ModalCT">

    <!-- Modal Icon -->
    <div class="TtAnCr Pg15">
        <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- Red background circle -->
            <circle cx="50" cy="50" r="50" fill="#F44336" />

            <!-- White cross (X) -->
            <path d="M30 30 L70 70" stroke="white" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M70 30 L30 70" stroke="white" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </div>


    <!-- Modal Heading -->
    <div class="BrBm2 CrBrGy90Lt PgTp20 PgBm20 DyFx FxJyCtCr FxAnIsCr">
        <h3 class="FtSe22 FtWt600">Failed</h3>
    </div>

    <!-- Modal Body -->
    <div class="BrBm2 CrBrGy90Lt PgTp10 PgBm20">
        <p class="FtSe16 FtWt600 TtAnCr">Opps! Your action was not completed.</p>
    </div>

    <!-- Modal Footer -->
    <div class="DyFx FxJyCtCr Pg15">
        <button class="ModalFailBtn Bn CrBrWe CrWe MnLt2 MnRt2 Wh60p" style="background: #F44336; border-radius: 10px; padding: 10px;">OK</button>
    </div>

</div>

<!-- Button to Launch Modal -->
<div class="DyFx Pg10 FxJyCtSt Wh100p">
    <button id="failedModalBtn" class="Bn CrBrBe CrBdBe CrWe">Show Failed Modal</button>
</div>


// failed modal
const failedModalObj = {
    id: 'failedModal',                
    autoClose: 0, // 0 means no auto close
    classes: {
        ModalCT: 'slideDownFadeIn CrBdWe BrRs5 Wh95vw Sl:Wh70vw Mm:Wh40vw MnLtAo MnRtAo MnTp20',
    },

    onSuccess: () => {
        console.log('on success called')
    },

    onFail: () => {
        console.log('on close called')
    },
}

document.addEventListener('DOMContentLoaded', async () => {
    document.getElementById('failedModalBtn').addEventListener('click', () => {
        CT.CePp(failedModalObj)
    });
});

Custom Modal

Custom Modals allow you to dynamically create and display modals based on runtime logic. This is useful when you need to generate multiple modals (e.g., in a loop) and show them individually at different times.

Key Features

Dynamic Generation: Create modal content programmatically.
Multiple Modals: Instantiate multiple modals and trigger them as needed.
Flexible Behavior: Fully customizable with support for custom content, buttons, and callbacks.

Note

You have to change the innerHTML to customize the modal according to your need.
The Pop Up is triggered by calling the CePp() fuction.
Pass object customModalObj into CePp() function to use this popup.
For Customising the webpage we have to pass classes into the Modal object in the classes property.
You can set auto close by adding time (in milliseconds) to the autoclose property in object.
Add CloseBtn class for close button which when clicked on closes the popup.

Source Code


function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

document.addEventListener('DOMContentLoaded', async () => {

    // Multiple Custom Modal Initialize
    for (let i = 0; i < 4; i++) {
        // custom modal
        const customModalHTML = {
            customHTML: `
            <div id="customModal${i}" class="ModalCT">

              <div class="BrBm2 CrBrGy90Lt DyFx FxJyCtSeBn FxAnIsCr Pg15">
                  <h3 class="FtSe22">Custom Modal ${i}</h3>
                  <span class="CloseBtn FtSe25 CrurPr FtWt600">&times;</span>
              </div>

              <div class="BrBm2 CrBrGy90Lt Pg15">
                  <p class="FtSe20">Woohoo, you're reading this text in a modal!</p>
              </div>

              <div class="DyFx FxJyCtFxEd Pg15">
                  <button class="ModalFailBtn Bn CrBrRd CrBdRd50Lt CrWe MnLt2 MnRt2">No</button>
                  <button class="ModalSuccessBtn Bn CrBrBe CrBdBe CrWe MnLt2 MnRt2">Yes</button>
              </div>

          </div>`
        }

        CT.ItCmMl(customModalHTML) // initialise custom modal
    }

    // Multiple Custom Modal Calling
    for (let i = 0; i < 4; i++) {
        // custom modal object
        const customModalObj = {
            id: `customModal${i}`,
            autoClose: 0, // 0 means no auto close
            classes: {
                ModalCT: 'slideDownFadeIn CrBdWe BrRs5 Wh95vw Sl:Wh70vw Mm:Wh40vw MnLtAo MnRtAo MnTp20',
            },

            onSuccess: () => {
                console.log('on success called')
            },

            onFail: () => {
                console.log('on close called')
            },
        }

        await sleep(5000)

        CT.CePp(customModalObj)

    }

})