IWModalWindow and templates

[MJS@mjs.us]

One work around is to use a native bootstrap modal dialog embedded in your page template, for example:

Code:

... 

  <div class="modal" id="mdCL" role="dialog">
    <div class="modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content mx-auto" style="width: 50%; max-width: 800px; min-width: 200px;">
        <div class="modal-header"><h4 class="modal-title">Chair Labels</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
        <div class="modal-body">
          <div class="row">
            <div class="form-group col-md-3">Date:{%edDate%}</div>
            <div class="form-group col-md-3">Time:{%edTime%}</div>
            <div class="form-group col-md-2">Chairs:{%edChairs%}</div>
            <div class="form-group col-md-2">Columns:{%edColumns%}</div>
            <div class="form-group col-md-2">Rows:{%edRows%}</div>
          </div>
        </div>
        <div class="modal-footer">{%btnPrint%}<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button></div>
      </div>
    </div>
  </div>
...

You can activate it using an async button click like this:

Code:

...
      WebApplication->CallBackResponse->AddJavaScriptToExecuteAsCDATA("$('#mdCL').modal('show');");
...

When displayed it will behave like this:



or



 depending on the screen size or orientation.