<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Modal más largo</h2> <button class="btn btn-warning" id="btnLlamar">Mostrar</button> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog modal-largo"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</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>

@media (min-width: 759px){ .modal-largo { width: 750px; } } @media (min-width: 859px){ .modal-largo { width: 850px; } } @media (min-width: 959px){ .modal-largo { width: 950px; } } @media (min-width: 1059px){ .modal-largo { width: 1050px; } } @media (min-width: 1159px){ .modal-largo { width: 1150px; } } @media (min-width: 1259px){ .modal-largo { width: 1250px; } }

$('#btnLlamar').click(function(){ $('#myModal').modal('show'); });