Modal Dialog

The HTML page contains a button and modal dialog.

Using just Bootstrap's HTML attributes and no JavaScript, add attributes to the elements so that:

When the Open button is clicked, the modal dialog is opened.
When the Close button is clicked, the modal dialog is closed.

HTML5, CSS3, Bootstrap 4

Show starting code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Modal Dialog</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>    
  </head>
  <body>
    <button type="button" class="btn btn-primary">Open</button>

    <div class="modal" id="dialog">
      <div class="modal-dialog">
        <div class="modal-body modal-content">
          <button type="button" class="btn btn-danger">Close</button>
        </div>
      </div>
    </div>
  </body>
</html>

Open button has correct attributes : Wrong answer
Close button has correct attributes: Wrong answer
Open button shows dialog: Wrong answer
Close button hides dialog: Wrong answer

Use this question for your test

<< Previous Next >> Back to questions

Score Distribution

# of candidates

0-33%
34-66%
67-100%

Score

Would you like to see our other questions?

We have 750+ premium hand-crafted questions for 50+ job skills and 15+ coding language. We prefer questions with small samples of actual work over academic problems or brain teasers.

Visit our question library

Private Concierge

Send us an email with an explanation of your testing needs and a list of candidates. We will create an appropriate test, invite your candidates, review their results, and send you a detailed report.

Contact Private Concierge

Would you like to see our tests? The following tests contain Bootstrap related questions:

HTML/CSS and Bootstrap Online Test

HTML/CSS, JavaScript with jQuery, and Bootstrap Online Test

HTML/CSS, JavaScript, and Bootstrap Online Test

On the TestDome Blog

Screening Applicants: The Good, the Bad and the Ugly

Since we’re all biased and we use incorrect proxies, why not just outsource hiring to experts or recruitment agencies? After all, they’ve been screening people for many years, so they must know how to do it right?

Not really. I was surprised to discover that many experts disagree with each other. Everybody praises their pet method and criticizes the others. Many of these methods look legitimate, but are based on...