Modal Menu demo
by Ruben Ruiz Perez
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog custom-class">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel">PsicologĂa Revolucionaria</h2>
<br>
<table class="table">
<tr>
<td><strong>1</strong> Los sd tiasldfk asdlkjf </td>
</tr>
<tr>
<td><b>2</b> Las fsadf sakdfh ksa asdf</td>
</tr>
<tr>
<td><b>3</b> Las fsadf sakdfh ksa asdf</td>
</tr>
<tr>
<td><b>4</b> Las fsadf sakdfh ksa asdf</td>
</tr>
<tr>
<td>
<b>5</b> Las fsadf sakdfh ksa asdf</td>
</tr>
<tr>
<td><b>6</b> Las fsadf sakdfh ksa asdf</td>
</tr>
</table>
<ol>
<li>1 Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@media screen and (min-width: 768px) {
.custom-class {
width: 70%;
/* either % (e.g. 60%) or px (400px) */
}
}