Bootstrap 4: Adding a "Do not display again" option to a modal using a checkbox

I am struggling with getting my modal to disappear permanently when the checkbox "Don't show me again" is checked and the button "Close" is pressed. I have attempted using jquery-cookie, but so far I have been unsuccessful in achieving this desired behavior.

Despite checking the checkbox, pressing the 'close' button, and reloading the page, the modal keeps reappearing.

To view the code snippet, click here: https://codepen.io/anon/pen/WBPLEK

Here is the JavaScript portion of the code:

jQuery(document).ready(function($) {

    if ($.cookie('cacher-modal')) {
        $("#popupMaintenanceModal").remove();
    }
    else {
        $('#popupMaintenanceModal').modal('show');
    }

    if ($('#popupMaintenanceCheckbox').is(':checked')) {
        $(".btn-maintenance").click(function () {
            $("#popupMaintenanceModal").remove();
            $.cookie('cacher-modal', true);
        });
    }
});

Answer №1

Make sure to update your cookie setting logic for the window checkbox click event. Remember, you'll need to add a click event listener to the checkbox and then determine if it's checked or unchecked before setting the appropriate cookies. Additionally, here is a snippet of code you can use to hide the modal:

$("#popupMaintenanceModal").modal("hide");

This will effectively close the modal.

jQuery(document).ready(function($) {
  if ($.cookie("cacher-modal")) {
    $("#popupMaintenanceModal").remove();
  } else {
    $("#popupMaintenanceModal").modal("show");
  }

  $("#popupMaintenanceCheckbox").click(function() {
    if ($(this).is(":checked")) {
        $("#popupMaintenanceModal").modal("hide");
        $.cookie("cacher-modal", true);
    } else {
      $.cookie("cacher-modal", false);
    }
  })
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Building a Category Directory in WordPress

Hello, I am currently working on creating a list of Categories for my website's Sidebar. However, the information I have found about displaying this category list does not allow me to style it as I want. Initially, I aim to showcase only the top 5 mos ...

Incorporating a header include on every page throughout my website

Is there a way to include headers and footers in your HTML web pages without having to duplicate code on every page? I understand that this can be done using PHP, but what if you are creating a website solely with HTML? If there is no solution to avoid r ...

The `innerHTML` function is responsible for closing HTML

My switch structure is set up as follows: switch (ratio) { case "16:9": imgContainer.innerHTML = '<img src="images/test-rata-de-aspect.jpg">' break case "4:3": imgContainer.innerHTML = '<img src="image ...

Modifying the title of a menu in jQuery mmenu

For a while now, I have been attempting to configure and utilize Mmenu but have hit a roadblock when trying to modify the menu title. No matter how much I search through the documentation and experiment with different methods, I can't seem to change ...

Toggle visibility (individually duplicating) one thousand sentences while maintaining optimal browser and host performance

I have created JQuery scripts to toggle the display of future sentences on my page (approximately 1000 duplicates) and I am seeking the most efficient method (for browser/host) to accomplish this task. Here are two functional solutions that I have already ...

A two-column layout utilizing the full height feature in Bootstrap 5, excluding the use of cards within the

I am currently attempting to create a two-column full-height page without using cards. Instead, I want to include a significant amount of text, links, and buttons in both columns. I am uncertain if this is achievable with Bootstrap columns. If anyone knows ...

As the width decreases in animation, the content gradually disappears until it reaches zero

My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how t ...

Emphasizing specific terms by changing them (but only within p tags)

After spending about 8 hours searching for a solution yesterday on various platforms, I almost gave up. But then I realized I should turn to this community for some much-needed help. So here is my first question - a big thank you to everyone who has helped ...

Display element exclusively when nav-tab is in an active state in Bootstrap 4

I'm working on creating nav-tabs with a unique feature where an arrow is displayed only on the active tab. How can I make this arrow disappear when another tab is clicked? Alternatively, how can I move the arrow to point to the content of the selected ...

Isotope is struggling to successfully implement ordering functionality

I'm currently using Isotope to arrange and display a series of "items". Although the items are displaying correctly, I am facing issues with the order. I have been attempting to use a simple parseInt to sort them, but something seems to be going wrong ...

ESLint error: EROFS read-only does not correspond to any directory

Can anyone help me with this issue? I am experiencing a problem when using Linux dual boot, but everything works fine when I use Windows. ERROR in [eslint] EROFS: read-only file system, open '/media/naufal/6878124278121004/Refactory/Skill-Test-Re ...

When the datepicker is clicked, ensure that the input remains active

I'm facing an issue where the label in a Bootstrap datepicker goes back to the bottom after clicking on the input and selecting a date. However, it stays up after the second click. I am unsure how to fix this problem, so any help or suggestions would ...

User Agent Stylesheets do not take effect

https://i.sstatic.net/UXF3l.png Currently, I am working on a simple unordered list project where I am utilizing Material UI. However, there seems to be an issue that I would like some help with. (user agent) html.css The CSS includes the property padd ...

Tips for triggering a click event on a hyperlink using a JavaScript function within the Nightmare library

I'm trying to figure out how to click a button using Nightmare with specific attributes. <a class="auth_button leftbtn" href="javascript:SubmitAuthCode( 'enter a friendly name here' );"> <h3>Submit</h3> < ...

When you hover over the vertical sidebar menu in Bootstrap material design, a submenu will appear

Looking to create a three-column display that functions as one submenu when hovering over each menu item? <div class="container"> <div class="row"> <div class="col-sm-4"> <ul class="vertical-nav"> <li>&l ...

No action when clicking JQuery-ui Dialog button on IE11

I created a form using the following HTML structure: <div id="dialogGlobal" title="About You"> <form> <fieldset style="border: none;"> <ul style="list-style-type: none; padding-left: 0px"> <li><lab ...

Eliminate the gutter margin between columns in Bootstrap 4

Recently, while working on an Angular project with Bootstrap 4, I came across a unique issue. It seems that the framework automatically adds some left margin when using the .col class. Despite trying to remove this margin, even the inspector is showing it ...

Problems with Google Maps Event Tracker

I recently inherited a section of code that utilizes the Google Maps API to place markers on a map along with information windows. Below is an excerpt from the code responsible for creating the markers and setting up event listeners: if(markers.length > ...

Achieve a smooth slide-in effect from the left for your sidebar when the button is clicked using TailwindCSS

I am currently working on a sidebar menu with a button that toggles its visibility. However, I am struggling to implement a sliding animation from the left when the sidebar appears, and a slide back to the right when it closes. This is what my code looks ...

Troubleshooting EasyZoom: Problems stemming from CSS and markup structure

Despite following the documentation correctly, I seem to be encountering an issue. There are no JavaScript errors and the DOM changes reflect my interactions. However, when I hover over the thumbnail, the larger image remains fixed at 0, 0. Removing the ea ...