CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
Mildred Faison
Mildred Faison

Reputation: 11

Modal Content needs to be hidden using Javascript until Onclick Button is clicked/Once Onclick Button is clicked, Modal should display

I tried googling to find some of the javascript that would work, but the first time that I submitted this assignment, I ended up messing up the bootstrap code. The professors want us a jascript code without changing any of the bootstrap code they provided for us.

I made a lot revisions and followed the feedback given to by my classmates. The first time I submitted the assignment I changed most of the code in order to have a modal that worked and the Reserve Table button that activated the modal. By making this mistake, I was not able to complete all the requirements to pass the assignment and I also unfortunately changed most of the code the professors provided me with.

Now I made sure I followed the instructions and requirements for the assignment and I am using the code the professors want but I need some suggestions.

Here is my codepen

https://codepen.io/mfaison/pen/wvazGNe 

<html lang="en">


<head>

<!-- Required meta tags always come first -->

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

 <!-- Bootstrap CSS -->

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
 <link rel="stylesheet" href="node_modules/font-awesome/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="styles.css"/>

  <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">

<script src="https://kit.fontawesome.com/d9d5df7122.js" crossorigin="anonymous"></script>

 <title>Ristorante Con Fusion</title>



</head>


<body>




<header class="page-header">
<header class="jumbotron">
    <nav class="navbar navbar-dark navbar-expand-sm fixed-top">
    <div class="container">


    <span class="navbar-toggler-icon">
    <a class="navbar-brand mr auto href="./about.html"><div class="img1"><img src="https://laramieprojectact3.weebly.com/uploads/1/0/0/9/100925572/logo_orig.png" width=70 height=60 alt="Mildred Faison" class="center"/></a> 
    <div class="collapse-navbar-collapse id="Navbar">
        </div>
    <ul class="navbar-nav mr-auto"> 
        <li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span> Home</a></li>

                    <li class="nav-item"><a class="nav-link" href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About</a></li>

                    <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a></li>

                   <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-address-card fa-lg"></span> Contact</a></li>
    </li>
    </ul>

</div>

</nav>  <div class="container">

  <div class="row row-header">

       <div class="col-12 col-sm-6">

<h1>Ristorante con Fusion</h1>

  <div class="row align-items-left justify-content-start">                  
 <div class="left">
    <p class="left1">We take inspiration from the World's best cuisines, 
   and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!
    <div class="row align-items-center justify-content-center">
    <div class="img2"><img src="https://laramieprojectact3.weebly.com/uploads/1/0/0/9/100925572/logo_orig.png" width=110 height=100 alt="Mildred Faison" class="center"/></p>  


      </div> 
  <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" role="content">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                  <div class="modal-body"> 




                    <button type="button" class="close" data-dismiss="modal">&times</button>

  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio" checked>Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3
    <label class="radio-inline">
      <input type="radio" name="optradio" checked>Option 4
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 5
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 6</label>

</div>
</p>


    <script>        function closeWin() {
  myWindow.close();
}
      </script>

            <div class="container">



        </div>
<div class="form-row">
 <div class="form-group col-sm-4">                   
  <div class="btn-group" role="group" data-toggle="buttons">
    <label>Section</label>
    <label><button type="button" class="btn btn-success active">Non-Smoking</button></label>
        <script>
  document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById("mybutton").click();
 });
</script>

          <label class="button6"><button type="button" class="btn btn-danger">Smoking</button> 
  </label>
   </div>
   </div>
  </div>

            <div class="Date">       
<div class="form-group mx-sm-3 mb-2">
 <main><p><a name="form">Date and Time</a></p></main>         
     <label for="inputDate2" class="sr-only">Date</label></form>
     <input type="date" class="form-control" id="inputDate2" placeholder="Date">
  </div>
   <div class="Time">
<div class="form-group mx-sm-3 mb-2">
    <label for="inputTime2" class="sr-only">Time</label></form>
   <input type="time" class="form-control" id="inputTime2" placeholder="Time"/>
 </div>
                                                                             </form>

</div>
</div>




</div>
      </div>
      </div>
</div>



                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <button8 onclick="closeWin()">Close</button8>

    <script>        function closeWin() {
  myWindow.close();
}
      </script>
                            <button type="submit" class="btn btn-primary btn-sm ml-1">Reserve</button>        
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> 
    <button onclick="document.getElementById('id01').style.display='block'" class="button1  w3-yellow w3-font-color-white data-toggle="modal" data-target="myModal">Reserve Table</button> 
      </header><br><br>


    <div class="container"> 


     </div>

  <div class="col-12 col-sm align self-center">




       </div>

        </div>

 </div>

  </header>
    <main class="page-body">


<div class="container">

     <div class="row row-content align-items-center">

        <div class="col-12 col-sm-4 order-sm-last col-md-3">

        <h1 class="h1A">Our Lipsmacking Culinary Creations</h1>

</div>         
   <div class="col col-sm order-sm-first col-md">
     <div class="media-body">
            <h1 class="mt-0 row row-content align-items-center">Uthappizza<span class="badge badge-danger"> <button type="button">HOT</button></span><span class="badge badge-pill badge-secondary"><p id="rcorners1">$4.99</p> </span></h1>
    <p class="p3"> <img src="http://mildredprofessionawebsite.weebly.com/uploads/1/0/0/9/100925572/buffet_orig.png"  width=90 height=90 alt="Mildred Faison" class="left mr-4"/>  
        A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>





          </div>

        </div>




           <div class="right">




    <div class="row row-content align-items-left">

         <div class="col-12 col-sm-4  col-md-3">


              <h3 class="h3A">This Month's Promotions</h3>
  <div class="row align-items-center justify-content-center">

     <br><br><br><br><br><br><br><br><br> <h2 class="right1">Weekend Grand Buffet <button type="button">NEW</button></h2>
               <div class="container"> 
    <p>    <div class="img5"><img src="http://mildredprofessionawebsite.weebly.com/uploads/1/0/0/9/100925572/buffet_orig.png" width=110 height=100 alt="Mildred Faison" class="left ml-4"/>          

             Featuring mouthwatering combinations with a choice of five different salads, <br> six enticing appetizers, six main entrees and five choicest desserts. Free<br> flowing bubbly and soft drinks. All for just $19.99 per person
                 </p>

             </div>
</div>
           </div>

       </div>

  </p>

  </div>

             </div>

           </div>

       </div>



      <div class="row row-content align-items-center">


           <div class="col-12 col-sm-4 order-sm-last col-md-3">

             <div class="container1">
              <aside>
               <h1Z>Meet our Culinary Specialists</h1Z>
                </aside>
           </div>
              </div>

        <div class="col col-sm order-sm-first col-md">

            <div class="media-body">
                    <h2 class="h2E">Alberto Somayya</h2>
                    <h4>Executive Chef</h4>

               <p class="p5"> <img src="https://laramieprojectact3.weebly.com/uploads/1/0/0/9/100925572/alberto_orig.png"  width=90 height=90 alt="Mildred Faison" class="right mr-5"/>  Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. 
        </p>

            </div>

        </div>

    </div>


   <footer class="page-footer">

    <h5>Links</h5>

                   <ul class="ul20">

                      <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>

                        <li><a href="#">Menu</a></li>

                        <li><a href="#">Contact</a></li>

                    </ul>

                     </div>
</p>
        <h10>Our Address</h10>
                    <address class="add">

                      121, Clear Water Bay Road<br>

                      Clear Water Bay, Kowloon<br>

                      HONG KONG<br>

                                            <i class="fas fa-phone-square"></i>: +852 1234 5678<br>
                      <i class="fa fa-fax fa-lg"></i>: +852 8765 4321<br>
                      <i class="fa fa-envelope fa-lg"></i>: 
                      <a href="mailto:[email protected]">[email protected]</a>



                   </address>
                     </div></p>
  <div class="g3">

        <a class="btn btn-social-icon btn-google" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
                        <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
                        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
                        <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
                        <a class="btn btn-social-icon btn-google" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
                        <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
                    </div>
</div>



                        <a class="btn btn-social-icon btn-google" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
                        <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
                        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
                        <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
                        <a class="btn btn-social-icon btn-google" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
                        <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
                    </div>
             </div> 


    </div>
</div>
</div>
    </footer>
</div>
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>

    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>

    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>


<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>

     </html>

    Any feedback is greatly appreciated.

    Thank you,

    Mildred

I went over the code following the feedback. The modal code is exactly as provided by professors. The modal body and the code for the Reserve Table button is part of the code I added. My problem is that the assignment requires that the Reserve Table button opens and closes the modal, and it is not doing that. The other part of the assignment is that the modal body be inside of a modal, and that it displays the modal only when the Reserve Table button is clicked which is not working.

Upvotes: 1

Views: 163

Answers (1)

Rene van der Lende
Rene van der Lende

Reputation: 5281

As commented, you need to come up with proper reproducible code, nonetheless, here is some working html/JS to toggle something hidden/visible...

function toggleModal(id) {
  var elem = document.getElementById(id); /* get reference to html element */
  
  if (id) { /* if the element with #id is found, otherwise do zilch */
      var showing = (elem.style.display == 'none') ? false : true; // if () ? then : else

      if (showing) { elem.style.display = 'none';  }  // if the modal is already on screen then hide
      else         { elem.style.display = 'block'; }; // otherwise show the modal
  };
}
<button onclick="toggleModal('myModal')">toggle Modal</button>
<div id="myModal" style="display: none">bla bla and some yada yada</div>

Don't tell your professors...

(...you better make sure you understand what the code does, otherwise you will still score an F, just saying...)

Upvotes: 1

Related Questions