Activate divs with Bootstrap5 modal toggle functionality

Question

Activate divs with Bootstrap5 modal toggle functionality

What adjustments must be made to the Bootstrap 5 example below in order to achieve the following two objectives:

The "afterAcceptingTerms" division should remain hidden until the user clicks on the Accept Terms modal button, ensuring that only the "beforeAcceptingTerms" division is visible prior to this action.
Upon clicking on the Accept Terms modal button, the "afterAcceptingTerms" division should become visible while the "beforeAcceptingTerms" division is concealed.

While the following code snippet represents our initial Bootstrap 5 setup, it does not successfully implement the required toggling of div classes as outlined above.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Modal Popup Page</title>
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="/assets/js/popper.min.js"></script>
    <script src="/assets/js/bootstrap.min.js" ></script>
  </head>
  <body>
    <div class="wrapper" id="beforeAcceptingTerms">
      <section class="content-section">
        <p>To access the content of this page, you need to click on the "I agree to the terms" button.</p>
      </section>
  </div>
  <div class="wrapper" id="afterAcceptingTerms">
    <section class="content-section">
      <p>Page content will be displayed here after accepting the terms by clicking the modal's Accept button and closing the modal.</p>
    </section>
  </div>
<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel"   data-bs-backdrop="static" aria-hidden="true">
      <div class="modal-dialog" style="position: fixed;bottom: 0;left: 0;right: 0;">
          <div class="modal-content">
        <div class="modal-body">
            By using this site, you certify that you agree to our <a href="/terms">Terms of Use</a>.
        </div>
        <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="localStorage.setItem('acceptTerms',1)">I agree to the Terms.</button>
        </div>
      </div>
      </div>
    </div>
    <script>
      let acceptTerms = localStorage.getItem('acceptTerms');
      if(acceptTerms != 1){
        var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
        myModal.show()
      }
    </script>
  </body>
</html>

javascript html css twitter-bootstrap bootstrap-5

Answer 1

Answer №1

You neglected to include CDNs instead of your local files.

(I appended a button to clear local storage data for testing purposes).

What have I modified?

        // Window onload event to display your content if users have accepted terms
        // calling checkTerms() function
        window.onload = (event) => {
            checkTerms();
        };

        const afterAcceptingTerms = document.getElementById('afterAcceptingTerms');
        const acceptTermsButton = document.getElementById('acceptTermsButton');

        // Added a listener to your accept terms button
        // removing inline onclick element attribute
        acceptTermsButton.addEventListener('click', function() {
            termsAccepted();
        });
        // Here we manage what to do when the user clicks on the accept terms button
        // in this case with try/catch to prevent critical errors, it's good to send
        // errors like that (in a catch block) to a server so you stay on top of any errors users may experience
        function termsAccepted() {
            try {
                localStorage.setItem('acceptTerms', 1);
            } catch (error) {
                alert('CRITICAL ERROR !!!! USER WILL NOT SEE THE CONTENT');
            }
            afterAcceptingTerms.classList.remove('none');
        }
        // Function called when the window loads !! To check if the user has accepted the terms !
        // I'm using try/catch because this is critical, if the localStorage can't be accessed
        // your content won't be shown
        function checkTerms() {
            let val = '';
            try {
                val = localStorage.getItem('acceptTerms');
            } catch (error) {
                alert('CRITICAL ERROR !!!! USER WILL NOT SEE THE CONTENT');
            }
            if (val === '1') {
            afterAcceptingTerms.classList.remove('none');
            } else {
                var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
                myModal.show()
            }
        }

I also added a .none class with (display:none) to your #afterAcceptingTerms element, it was crucial for this element to start with display:none. We are going to remove that class programmatically:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Modal Popup Page</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c19021e021f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c7dcc0dcc1">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .none {
            display: none;
        }
    </style>
  </head>
  <body>
    <div class="wrapper" id="beforeAcceptingTerms">
      <section class="content-section">
        <p>You must click on the "I agree to the terms button" in order to see the content on this page.</p>
      </section>
      <button id="clearData">Clear storage data</button>
  </div>
  <div class="wrapper none" id="afterAcceptingTerms">
    <section class="content-section">
      <p>The page content goes here.  But this is only visible because you clicked on the Accept button on the modal in order to get the modal to go away.</p>
    </section>
  </div>
<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel"   data-bs-backdrop="static" aria-hidden="true">
      <div class="modal-dialog" style="position: fixed;bottom: 0;left: 0;right: 0;">
          <div class="modal-content">
        <div class="modal-body">
            By using this site, you certify that you agree to our <a href="/terms">Terms of Use</a>.
        </div>
        <div class="modal-footer">
              <button type="button" id="acceptTermsButton" class="btn btn-secondary" data-bs-dismiss="modal">I agree to the Terms.</button>
        </div>
      </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3938c93938691cd8990a3d2cdd2d5cdd2">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script>
        var clearData = document.getElementById('clearData');
        clearData.addEventListener('click', function() {
            localStorage.clear();
        });

        window.onload = (event) => {
            checkTerms();
        };

        const afterAcceptingTerms = document.getElementById('afterAcceptingTerms');
        const acceptTermsButton = document.getElementById('acceptTermsButton');

        acceptTermsButton.addEventListener('click', function() {
            termsAccepted();
        });

        function termsAccepted() {
            try {
                localStorage.setItem('acceptTerms', 1);
                afterAcceptingTerms.classList.remove('none');
            } catch (error) {
                alert('CRITICAL ERROR !!!! USER WILL NOT SEE THE CONTENT');
            }
        }

        function checkTerms() {
            let val = '';
            try {
                val = localStorage.getItem('acceptTerms');
                if (val === '1') {
                afterAcceptingTerms.classList.remove('none');
                } else {
                    var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
                    myModal.show()
                }
            } catch (error) {
                alert('CRITICAL ERROR !!!! USER WILL NOT SEE THE CONTENT');
            }
        }
    </script>
  </body>
</html>

Answer 2

You neglected to include CDNs instead of your local files.

(I appended a button to clear local storage data for testing purposes).

What have I modified?

        // Window onload event to display your content if users have accepted terms
        // calling checkTerms() function
        window.onload = (event) => {
            checkTerms();
        };

        const afterAcceptingTerms = document.getElementById('afterAcceptingTerms');
        const acceptTermsButton = document.getElementById('acceptTermsButton');

        // Added a listener to your accept terms button
        // removing inline onclick element attribute
        acceptTermsButton.addEventListener('click', function() {
            termsAccepted();
        });
        // Here we manage what to do when the user clicks on the accept terms button
        // in this case with try/catch to prevent critical errors, it's good to send
        // errors like that (in a catch block) to a server so you stay on top of any errors users may experience
        function termsAccepted() {
            try {
                localStorage.setItem('acceptTerms', 1);
            } catch (error) {
                alert('CRITICAL ERROR !!!! USER WILL NOT SEE THE CONTENT');
            }
            afterAcceptingTerms.classList.remove('none');
        }
        // Function called when the window loads !! To check if the user has accepted the terms !
        // I'm using try/catch because this is critical, if the localStorage can't be accessed
        // your content won't be shown
        function checkTerms() {
            let val = '';
            try {
                val = localStorage.getItem('acceptTerms');
            } catch (error) {
                alert('CRITICAL ERROR !!!! USER WILL NOT SEE THE CONTENT');
            }
            if (val === '1') {
            afterAcceptingTerms.classList.remove('none');
            } else {
                var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
                myModal.show()
            }
        }

I also added a .none class with (display:none) to your #afterAcceptingTerms element, it was crucial for this element to start with display:none. We are going to remove that class programmatically:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Modal Popup Page</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c19021e021f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c7dcc0dcc1">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .none {
            display: none;
        }
    </style>
  </head>
  <body>
    <div class="wrapper" id="beforeAcceptingTerms">
      <section class="content-section">
        <p>You must click on the "I agree to the terms button" in order to see the content on this page.</p>
      </section>
      <button id="clearData">Clear storage data</button>
  </div>
  <div class="wrapper none" id="afterAcceptingTerms">
    <section class="content-section">
      <p>The page content goes here.  But this is only visible because you clicked on the Accept button on the modal in order to get the modal to go away.</p>
    </section>
  </div>
<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel"   data-bs-backdrop="static" aria-hidden="true">
      <div class="modal-dialog" style="position: fixed;bottom: 0;left: 0;right: 0;">
          <div class="modal-content">
        <div class="modal-body">
            By using this site, you certify that you agree to our <a href="/terms">Terms of Use</a>.
        </div>
        <div class="modal-footer">
              <button type="button" id="acceptTermsButton" class="btn btn-secondary" data-bs-dismiss="modal">I agree to the Terms.</button>
        </div>
      </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3938c93938691cd8990a3d2cdd2d5cdd2">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script>
        var clearData = document.getElementById('clearData');
        clearData.addEventListener('click', function() {
            localStorage.clear();
        });

        window.onload = (event) => {
            checkTerms();
        };

        const afterAcceptingTerms = document.getElementById('afterAcceptingTerms');
        const acceptTermsButton = document.getElementById('acceptTermsButton');

        acceptTermsButton.addEventListener('click', function() {
            termsAccepted();
        });

        function termsAccepted() {
            try {
                localStorage.setItem('acceptTerms', 1);
                afterAcceptingTerms.classList.remove('none');
            } catch (error) {
                alert('CRITICAL ERROR !!!! USER WILL NOT SEE THE CONTENT');
            }
        }

        function checkTerms() {
            let val = '';
            try {
                val = localStorage.getItem('acceptTerms');
                if (val === '1') {
                afterAcceptingTerms.classList.remove('none');
                } else {
                    var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
                    myModal.show()
                }
            } catch (error) {
                alert('CRITICAL ERROR !!!! USER WILL NOT SEE THE CONTENT');
            }
        }
    </script>
  </body>
</html>

Activate divs with Bootstrap5 modal toggle functionality

Answer №1

Similar questions

The numbering in the list does not align vertically with the corresponding content

Changing the size of icons in an Alert using Material UI with React

Having trouble shutting down the window using Electron and Socket io

The Enigmatic Gap Amidst Flex Elements

How to swap one image for another using jQuery on click

Using jQuery to delay hiding for 2 seconds

NextJS Input Field causing a strange "Hydration Error indicating server HTML should not contain a <div> within a <form>", perplexingly occurring only in Chrome and exclusively on my personal computer

Tips for incorporating `new google.maps.Marker()` with `vue2-google-maps` are as follows:1. First

Switching Vue.js from the standalone build to the runtime-only build midway through a project?

Placing pins on Google Maps

The transition effect is not activated when using the MUI Drawer with react-router-dom

Secure your desktop application with OAuth by enabling HTTPS on localhost

Issues arise when the condition fails to function correctly during the process of form

Remove the initial DIV element from the HTML code

Looping through a nested for loop within an HTML table

Picking specific <button> items

Is it possible to set a different default page index other than 0 in a material table using reactjs?

Align content to the bottom using Bootstrap 4

Adjust padding of elements based on scrolling movements

Restrict page scrolling to the vertical position of a specified div [Using jQuery, javascript, and HTML]