I have this code when I try click a button, it doesn't close the panel to view what's beneath it. I want to be able to have the panel hidden CSS

New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter1: Getting Started With Html5: Creating A Website For A Food Vendor
Section: Chapter Questions
Problem 3CP4
icon
Related questions
Question
I have this code when I try click a button, it doesn't close the panel to view what's beneath it. I want to be able to have the panel hidden CSS
<script src="/static/is/bundle.js"></script>
<script src="/static/is/0.chunk.js"></script>
<script src="/static/is/main.chunk.js"></script>
<div aria-hidden="true"></div>
<div aria-hidden="true"></div>
<div class="fade modal-backdrop show"></div>
<div role="dialog" aria-modal="true" class="fade modal show" tabindex="-1" aria-labelledby-"contained-modal-title-vcenter" style="display: block;">
<div class="modal-dialog custom-dialog">
<div class="modal-content"> flex
<div class="modal-header" style="border-bottom: 1px solid rgb(97, 97, 97);">Gen
►<div class="d-block d-nd-none col-1" style="text-align: left; padding: 0px;"> </div>
<div class="col" style="text-align: center; padding-top: 0px; padding-bottom: 0px;"></div>
<button type="button" class="close">50
<span aria-hidden="true">x</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body"> </div>
</div>
</div>
</html>
</div>
</body>
html body.modal-open div.fade.modal show div.modal-dialog.custom-dialog div.modal-content divmodal-header button close
Transcribed Image Text:<script src="/static/is/bundle.js"></script> <script src="/static/is/0.chunk.js"></script> <script src="/static/is/main.chunk.js"></script> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <div class="fade modal-backdrop show"></div> <div role="dialog" aria-modal="true" class="fade modal show" tabindex="-1" aria-labelledby-"contained-modal-title-vcenter" style="display: block;"> <div class="modal-dialog custom-dialog"> <div class="modal-content"> flex <div class="modal-header" style="border-bottom: 1px solid rgb(97, 97, 97);">Gen ►<div class="d-block d-nd-none col-1" style="text-align: left; padding: 0px;"> </div> <div class="col" style="text-align: center; padding-top: 0px; padding-bottom: 0px;"></div> <button type="button" class="close">50 <span aria-hidden="true">x</span> <span class="sr-only">Close</span> </button> </div> <div class="modal-body"> </div> </div> </div> </html> </div> </body> html body.modal-open div.fade.modal show div.modal-dialog.custom-dialog div.modal-content divmodal-header button close
Expert Solution
steps

Step by step

Solved in 4 steps with 1 images

Blurred answer
Knowledge Booster
Multimedia tools and applications
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
Programming with Microsoft Visual Basic 2017
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:
9781337102124
Author:
Diane Zak
Publisher:
Cengage Learning