Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Juan Jose Pino Reyes
Juan Jose Pino Reyes
51 Points
Posted by Juan Jose Pino Reyes
Juan Jose Pino Reyes
51 Points

How to make a modal?

Someone know how to make a modal?

2 Answers

Igor Yamshchykov
Igor Yamshchykov
24,397 Points
Igor Yamshchykov
Igor Yamshchykov
24,397 Points

the simple way is to use bootstrap modals

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

you need to include bootstrap for this to work, like so,

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Also you can write your own modal, or use some jquery plugins.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Probably one of the best ways would be to dissect an existing modal. For instance, you could look at how the bootstrap framework handles modals. There are a few ways to do it, but generally, you have the modal in the HTML, or the content of the modal dynamically called with ajax, initially hidden from page view with CSS, and than use Javascript to trigger showing the modal or dismissing it. Positioning of the modal would most likely be done with CSS, as would the styling of it.