How to resize modal window in bootstrap 3?

IvoLO2013-11-19 17:47:50

Bootstrap

IvoLO, 2013-11-19 17:47:50

I found in one place that I need to add code to CSS:
#myModal .modal-dialog
{
width: 70%;
}

and in javascript add:

$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});

CSS folder found, but how to find the folder with javascript? please do not kick me, I'm not a pro in this, I just understand.

Answer the question

In order to leave comments, you need to log in

7 answer(s)

Yuri Lobanov, 2013-11-19
@IvoLO

If you want a quick way, then search in the files bootstrap.css, bootstrap.min.css ".modal-dialog" and change the value "600px" to whatever you want.
Or, anywhere write:

#myModal.modal-dialog {
width: 500px!important;
}

And don't forget to assign id="myModal" to the very window whose width you want to change.

IvoLO, 2013-11-19
@IvoLO

everything that you suggested does not help, already prescribed

Sergey Kharchevnikov, 2019-09-12
@sergey_harchevnikov

The Bootstrap 3 and 4 framework allows you to customize the size of the modal. There are 2 additional classes in this platform for this: .modal-lg (increases the width of the modal window) and .modal-sm (reduces the width of the modal window).
To change the size of the modal window, one of these classes must be additionally placed next to the .modal-dialog class.

<!-- Кнопка, открывающая широкое модальное окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Открыть ширикое модальное окно </button>
<!-- Широкое модальное окно -->
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!--...-->
    </div>
  </div>
</div>
     
<!-- Кнопка, открывающая узкое модальное окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Открыть узкое модальное окно </button>
<!-- Узкое модальное окно -->
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <!--...-->
    </div>
  </div>
</div>

Yuri Lobanov, 2013-11-19
@iiil

Arm yourself with a code review tool, they are available in chrome and mozilla by default, or use firebug for mozilla. Open a modal and see where it gets its width (and based on the question, its height), change these settings if you want to change the width globally. If only in some separate window, then use a construction like the one you suggested.
What you want to add to javascript has nothing to do with the size of the modal window, but is one of the ways to call the window.

inqueez, 2013-11-19
@inqueez

Not sure about version 3, but Bootstrap 2 had enough code like this

$('#myModal').modal({
      show:true,
      width:250px
})

In general, something like this:
in the Html of your page, create a layer
and then insert the script after the tag</body>

<script>
$(document).on('click', '#myModal', function(){
$('#myModal').modal({
      show:true,
      width:250px
})});
</script>

and don't forget to include jQuery in the block<head></head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

IvoLO, 2013-11-19
@IvoLO

code again to make it look better:

.modal-dialog {
  z-index: 1050;
  width: 600px;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
}

Dinar Garipov, 2013-11-20
@gaaarfild

The second part is what you should write.
If this is a ready-made system, then it is unlikely that, without having extrasensory perception, you can guess where the file is located in it. We don't know what you're working on. :)