Bootstrap5 modal must toggle visibility of divs-CodePudding

What specific changes need to be made in the Bootstrap 5 example below in order for the following two things to occur:

the "afterAcceptingTerms" div should be hidden until the user has clicked on the Accept Terms modal button, so that only the "beforeAcceptingTerms" div should be visible until the user has clicked on the Accept Terms modal button.**
the "afterAcceptingTerms" should become visible once the user clicks on the Accept Terms modal button, and the "beforeAcceptingTerms" div should be hidden once the user clicks on the Accept Terms modal button.

Here is the Bootstrap 5 code we are currently starting with, but you can see that the code example below fails to toggle the div classes as stated in the requirements 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  id="beforeAcceptingTerms">
      <section >
        <p>You must click on the "I agree to the terms button" in order to see the content on this page.</p>
      </section>
  </div>
  <div  id="afterAcceptingTerms">
    <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  id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel"   data-bs-backdrop="static" aria-hidden="true">
      <div  style="position: fixed;bottom: 0;left: 0;right: 0;">
          <div >
        <div >
            By using this site, you certify that you agree to our <a href="/terms">Terms of Use</a>.
        </div>
        <div >
              <button type="button"  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>

CodePudding user response：

You forgot to add cdn's instead your local files ^^

(I added a button to clear local storage data for testing purpose)

What i change?

        // Window onl oad event to display your content if users has 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 manages what to do when user click in the accept terms button
        // in this case with try/catch to prevent critical errors its good to send
        // errors like that (in a catch block) to an server for you stay on what errors users can 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 window load !! To check if user has accept the terms !
        // Im using try/catch because this is critical , if the localStorage cant be acessed
        // your content dont will be showned
        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()
            }
        }

Also added a .none class w/ (display:none) to your #afterAcceptingTerms element , in this purpose was essential this element start with display:none . We gonna remove that class programmaticaly :

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .none {
            display: none;
        }
    </style>
  </head>
  <body>
    <div  id="beforeAcceptingTerms">
      <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  id="afterAcceptingTerms">
    <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  id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel"   data-bs-backdrop="static" aria-hidden="true">
      <div  style="position: fixed;bottom: 0;left: 0;right: 0;">
          <div >
        <div >
            By using this site, you certify that you agree to our <a href="/terms">Terms of Use</a>.
        </div>
        <div >
              <button type="button" id="acceptTermsButton"  data-bs-dismiss="modal">I agree to the Terms.</button>
        </div>
      </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>