<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- START OF HTML FOR DEMO - NOT NEEDED --> <div class="container "> <div class="fundo-quiz quadro-amarelo borda-preta"> <div class="caixa-preta"> <h1>Slacker Style Modal</h1> </div> <div class=""> <div class="quiz" id="quiz" data-toggle="buttons"> <label class="element-animation1 btn btn-lg btn-primary btn-block caixa-vermelha"> <span class="btn-label"> <i class="glyphicon glyphicon-chevron-right"></i> </span> Proposição é toda matéria sujeita à deliberação da Assembleia ou de suas comissões, conforme o caso. </label> <label class="element-animation1 btn btn-lg btn-primary btn-block caixa-vermelha"> <span class="btn-label"> <i class="glyphicon glyphicon-chevron-right"></i> </span> Proposição é todo texto arquivado pelo Poder Legislativo. </label> <label class="element-animation1 btn btn-lg btn-primary btn-block caixa-vermelha"> <span class="btn-label"> <i class="glyphicon glyphicon-chevron-right"></i> </span> Proposição é todo ato do Executivo que objetiva a criação de direitos. </label> <label class="element-animation1 btn btn-lg btn-primary btn-block caixa-vermelha"> <span class="btn-label"> <i class="glyphicon glyphicon-chevron-right"></i> </span> Proposição é todo andamento processual aprovado na Assembleia Legislativa. </label> </div> </div> <p> <button class="btn btn-lg btn-info" data-toggle="modal" data-target=".bootstrap-modal">Launch Normal Bootstrap Modal</button> </p> </div> </div> <!-- /container --> <a href="http://bootsnipp.com/iframe/rgNez" class="btn btn-primary" id="fullscreen" data-toggle="tooltip" data-placement="left" title="Full Screen"><span class="glyphicon glyphicon-fullscreen"></span></a> <div class="modal fade bootstrap-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- END OF HTML FOR DEMO - NOT NEEDED --> <div class="modal fade in slacker-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false"> <div class="modal-dialog modal-slacker"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel">Slacker Style Modal</h4> </div> <div class="modal-body"> <div class="col-md-6 text-center"> <img class="img-circle" alt="140x140" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjcwIiB5PSI3MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjE0MHgxNDA8L3RleHQ+PC9zdmc+" style="width: 140px; height: 140px;"> <h2>Heading</h2> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> <div class="col-md-6 text-center"> <img class="img-circle" alt="140x140" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjcwIiB5PSI3MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjE0MHgxNDA8L3RleHQ+PC9zdmc+" style="width: 140px; height: 140px;"> <h2>Heading</h2> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div>

/* START OF DEMO CSS - NOT NEEDED */ #fullscreen { position: fixed; top: 10px; right: 10px; } /* END OF DEMO CSS */ .modal-slacker { width: 100%; height: 100%; margin: 0px; } .modal-slacker .modal-content { margin-top: 5%; border-radius: 0px; border-left-width: 0px; border-right-width: 0px; height: 80%; overflow: auto; } .modal-slacker .modal-header .close { color: #fff; background-color: #428bca; border-color: #357ebd; opacity: 1; padding: 10px 17px; font-size: 27px; } .modal-slacker .modal-title { font-size: 34px; font-weight: bold; } @media (min-width: 992px) { .modal-slacker .modal-header, .modal-slacker .modal-body, .modal-slacker .modal-footer { width: 900px; } } @media (min-width: 768px) { .modal-slacker .modal-header, .modal-slacker .modal-body, .modal-slacker .modal-footer { width: 600px; margin: 30px auto; } } .caixa-preta { position: relative; display: block; /* width: 240px; */ background-color: black; padding: 10px; text-align: center; border: 4px black solid; color: #ffffff; } .borda-preta { border: solid 4px #000; } .quadro-amarelo { background-color: #FFC908; background-clip: content-box; } .numero-pergunta { margin-top: 20px; } .fundo-quiz .btn-primary:hover, .fundo-quiz .btn-primary:focus, .fundo-quiz .btn-primary:active, .fundo-quiz .btn-primary.active, .fundo-quiz .open .dropdown-toggle.btn-primary { color: #fff; background-color: #931012; border-color: #000000; } .fundo-quiz .modal-content h3 { border: none; background: #000; }