modals.html

<div id="modal_window" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal_window_title"></h4>
                <div class="spinner-border text-primary" id="modal_window_spinner" role="status"><span class="sr-only"></div>
            </div>
            <div class="modal-body">
                <div id="modal_window_message"></div>
                <div class="progress mt-3">
                    <div id="modal_window_progress" class="progress-bar progress-bar-striped progress-bar-animated"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="modal_window_yes" class="btn btn-primary"></button>
                <button id="modal_window_no" class="btn btn-secondary"></button>
                <button id="modal_window_close" class="btn btn-secondary"></button>
            </div>
        </div>
    </div>
</div>

<div id="modal_select" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-fluid modal-dialog-scrollable" role="document">
        <div class="modal-content" style="background: #ffffff;">
            <div class="p-3">
                <div class="row">
                    <div class="col-3 pr-1">
                        <select class="form-control mt-1 ml-1" id="modal_select_category">
                            <option value="-">---</option>
                        </select>
                    </div>
                    <div class="col-4 pl-1 pr-1">
                        <input type="search" class="form-control mt-1" style="width: calc(100% - 8px);" id="modal_select_keyword">
                    </div>
                    <div class="col-2 d-flex flex-row-reverse align-items-center p-0">
                        <div class="custom-control custom-checkbox pl-1">
                            <input class="custom-control-input" type="checkbox" id="modal_select_facility">
                            <label class="custom-control-label" for="modal_select_facility" id="modal_select_facilityname"></label>
                        </div>
                    </div>
                    <div class="col-3 d-flex flex-row-reverse align-items-center pr-1">
                        <button class="btn btn-light mr-2 ml-2" onclick="DataList.filtered_deselect()"><i class="far fa-square"></i></button>
                        <button class="btn btn-light ml-2" onclick="DataList.filtered_select()"><i class="fas fa-check-double"></i></button>
                        <select class="form-control p-0" id="modal_select_size">
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="12">12</option>
                            <option value="14">14</option>
                            <option value="16">16</option>
                            <option value="18">18</option>
                            <option value="20">20</option>
                            <option value="24">24</option>
                            <option value="32">32</option>
                            <option value="42">42</option>
                            <option value="54">54</option>
                            <option value="68">68</option>
                            <option value="84">84</option>
                            <option value="102">102</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <table class="table" id="modal_select_table"></table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="modal_select_ok"></button>
                <button class="btn btn-secondary" id="modal_select_cancel"></button>
            </div>
        </div>
    </div>
</div>