Magent2 Modal Widget - change width and height

Question

I am interesting in all the options that are available for the Magento Ui modal popup widget. Like:

var options = {
 type: 'popup',
 responsive: false,
 innerScroll: false,
 ......
}

Mainly for the size of the popup itself. I tried a couple of options like

size: 'sm'

as well as

width: 400,
height: 400

but nothing works. Is there documentation for the possible options you can pass to the modal widget?

Answer 1

You can use 'modalClass' option to set a custom css class to your modal popup und define width in the css:

.my-custom-class .modal-inner-wrap {
  width: 600px;
}

Answer 2

<a href="javascript:;"  class="bt-action" data="More Info"  >More Info</a><div class="bt-action-file" style="display: none;">Content here</div> 

require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {

            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: false,
                title: 'My Title',
                buttons: []
            };

            $(".bt-action").click(function() {

                $(".bt-action-file").modal(options).modal('openModal');

            });

        }
    );

<style type="text/css">
    .modal-popup .modal-inner-wrap{ width: 50%; }
</style>

Answer 3

Found this in google as the first result so I'm here to help others even though this was asked forever ago.

This pertains to SLIDE modals, not POPUP modals, but nevertheless some poor soul found this as the first result so here we are.

The best way I've found, is to first set a class on the modal, note the option modalClass

var options = {
 type: 'slide',
 responsive: true|false,
 innerScroll: true|false,
 modalClass: 'my-custom-class',
 ......
}

next in some CSS file, we can do this:

.modal-slide.my-custom-class { left: calc(100% - 1000px); }

where 1000px refers to the size you want the modal to be. This will push the gutter of the modal slider to all but 1000px of the width of the viewport, effectively giving you the width you want. Hope this helps someone.