Modal dont work on BS5 template

ndmn518

Hi! I tried to add modal in custom html but its not working.Is t4 bs5 blank template support modals?

Used this code from documentaion [https://getbootstrap.com/docs/5.0/components/modal/](https://)

 <div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

saguaros

You can backup this file:

/plugins/system/t4/src/t4/Document/Template.php

look for this function and add the below line of code to the end of this function:

	protected function renderHead()
	{
        ......
	$this->wam->useScript('bootstrap.modal');
	}

and use this custom CSS:


body.modal-open .modal {
    background-color: transparent !important;
    width: 100% !important;
    margin-left: auto !important;
    left: 0 !important;
    top: 0 !important;
    overflow-x: hidden;
    bottom: 0 !important;
    overflow-y: auto;
}

ndmn518

Yes it helps. Thank you!

May I ask why this feature is disabled by default?

saguaros

ndmn518 There are less people using this kind of modal, this update will be added in upcoming version of T4 framework 🙂