How to place modal in the bottom right of the page with fluent kit?

Question

I use fluent-kit package and I want to place the modal window in a bottom right corner of the page. I add .modal-bottom and .modal-right classes to the div.modal-dialog element, as per modal#position docs, however, it doesn't work.

My HTML

<div class='modal fade' id='modal-example' tabindex='-1' role='dialog' aria-labelledby='modal-example-title' aria-hidden='true'>
  <div class='modal-dialog modal-right modal-bottom' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='modal-example-title'>TITLE</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true' class='mi mi-Close'></span>
        </button>
      </div>
      <div class='modal-body'>
        CONTENT
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
        <button type='button' class='btn btn-primary'>OK</button>
      </div>
    </div>
  </div>
</div>

I do want to use this package specifically as it provides this functionality out of the box (I can see working examples in the docs). I am 100% sure my scripts and styles are added correctly. What am I missing?

score 0 · Accepted Answer · answered May 22 '18 at 19:30

It turns out that all the fluent-kit modal functionality is enclosed in .fluent-modal namespace.

In order to all the position classes:

.modal-top
.modal-bottom
.modal-left
.modal-right

and extra size classes:

.modal-full-height
.modal-fluid

to work, you need to add .fluent-modal class to the outer .modal element:

 <div class='modal fade fluent-modal' id='modal-example' tabindex='-1' role='dialog' aria-labelledby='modal-example-title' aria-hidden='true'>
  <div class='modal-dialog modal-right modal-bottom' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='modal-example-title'>TITLE</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true' class='mi mi-Close'></span>
        </button>
      </div>
      <div class='modal-body'>
        CONTENT
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
        <button type='button' class='btn btn-primary'>OK</button>
      </div>
    </div>
  </div>
</div>

How to place modal in the bottom right of the page with fluent kit?

1 Answers1