The "Close" button on Footer of Modal Dialog

If I enable No header/footer option from the Generate dialog window for one of my page, then when I display it via Modal dialog, the “Close” button is not generated on the Footer of Modal dialog. Only close (X) button at the top right of Modal dialog generated. This will make the Modal dialog looks strange.

I know that when I disable that No header/footer option, then the “Close” button on Footer of Modal dialog will be generated.

I want the “Close” button should be displayed on Footer of Modal dialog window, either for the page with No header/footer option disabled OR enabled.

The main reason for this is, because when I display the Edit page via Modal dialog, which the No header/footer option enabled, the Save and Cancel buttons are still displayed on Footer of Modal dialog.

No header/footer only does not output the header/footer of the layout, it should not affect the buttons. However, if you enable Modal for the page, the buttons are outputted in a template (i.e. <template class="ew-modal-buttons">) for moving to the footer of modal dialog, it won’t show in non-modal page. If you want to show it, you need to get the template content and output manually yourself.

You should be able to get the HTML by, e.g.

let htmlString = $('.ew-modal-buttons').html();

and then insert it to where you want.

Thanks for the useful info.

I searched for ew-modal-buttons keyword through all PHPMaker 2025 Template, and it found in the following files:

  1. add.html, edit.html, register.html, search.html, update.html
  2. ew.js, ew.min.js

In my case, I tried to display the content of Custom File (with Include common files enabled) via Modal dialog. Each time I enable No header/footer option for that Custom File, then the “Close” button on Footer Modal dialog is gone.

However, if I disable the No header/footer option for that Cusom File, the “Close” button on Footer Modal dialog is displayed properly.

The issue also does not happen for Add, Edit, Search, Update, and View pages that displayed via Modal dialog. The issue only happens for the Custom Files that displayed via Modal dialog.

You may post the content of your Custom File for discussion.

Here is the content of my Custom File (with Include common files enabled):

<?php
$sql = "SELECT * FROM `mydata`"; // define your SQL
$stmt = ExecuteQuery($sql); // execute the query
?>

<table class="table table-sm table-hover table-striped table-bordered table-responsive-sm" id="myCustomData">
    <thead>
        <tr>
            <th style="color: inherit;" scope="col" width="20">ID</th>
            <th style="color: inherit;" scope="col" width="250">Description</th>
            <th style="color: inherit;" scope="col" width="100">Date Created</th>
            <th style="color: inherit;" scope="col" width="100">Date Updated</th>
        </tr>
    </thead>
    <tbody>
<?php
if ($stmt->rowCount() > 0) { // check condition: if record count is greater than 0
    while ($row = $stmt->fetchAssociative()) { // loop
?>
        <tr>
            <td><?php echo $row["ID"]; ?></td>
            <td><?php echo $row["Description"]; ?></td>
            <td><?php echo $row["DateCreated"]; ?></td>
            <td><?php echo $row["DateUpdated"]; ?></td>
        </tr>
<?php        
    } // end loop
?>
    </tbody>
    <tfoot>
    </tfoot>
</table>
<?php
} else { // if there are no result
    echo "No record found."; // display the message
} // end of check condition
?>

Here is the code to display the link to open that Custom File via Modal dialog:

<?php
echo '<a style="display: flex;float: left;" class="btn btn-xs btn-link ew-row-link ew-view" data-table="mydata" data-caption="My Custom Data" data-ew-action="modal" data-action="view" data-ajax="false" data-url="datatables" data-btn="null" data-bs-original-title="My Custom Data"><i data-phrase="ViewLink" class="icon-view ew-icon"><span class="visually-hidden">My Custom Data</span></i></a>';
?>

In case you want to reproduce it, here is the table schema including some records example in it:

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for mydata
-- ----------------------------
DROP TABLE IF EXISTS `mydata`;
CREATE TABLE `mydata`  (
  `ID` int NOT NULL AUTO_INCREMENT,
  `Description` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `DateCreated` datetime NULL DEFAULT NULL,
  `DateUpdated` datetime NULL DEFAULT NULL,
  PRIMARY KEY (`ID`) USING BTREE
) ENGINE = MyISAM AUTO_INCREMENT = 13 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of mydata
-- ----------------------------
INSERT INTO `mydata` VALUES (1, 'First Row', '2025-05-29 20:27:11', '2025-06-01 10:41:41');
INSERT INTO `mydata` VALUES (2, 'Second Row', '2025-05-29 20:27:18', '2025-05-29 20:27:21');
INSERT INTO `mydata` VALUES (3, 'Third Row', '2025-05-29 20:27:23', '2025-05-29 20:27:26');
INSERT INTO `mydata` VALUES (4, 'Fourth Row', '2025-05-29 20:27:28', '2025-05-29 20:27:32');
INSERT INTO `mydata` VALUES (5, 'Fifth Row', '2025-05-29 20:27:34', '2025-05-29 20:27:37');
INSERT INTO `mydata` VALUES (6, 'Sixth Row', '2025-05-29 21:03:38', '2025-05-29 21:03:42');
INSERT INTO `mydata` VALUES (7, 'Seventh Row', '2025-05-29 21:03:44', '2025-05-29 21:03:47');
INSERT INTO `mydata` VALUES (8, 'Eights Row', '2025-05-29 21:03:49', '2025-05-29 21:03:52');
INSERT INTO `mydata` VALUES (9, 'Nineth Row', '2025-05-29 21:03:53', '2025-05-29 21:03:57');
INSERT INTO `mydata` VALUES (10, 'Tenth Row', '2025-05-29 21:03:59', '2025-05-29 21:04:01');
INSERT INTO `mydata` VALUES (11, 'Eleventh Row', '2025-05-29 21:04:05', '2025-05-29 21:04:10');
INSERT INTO `mydata` VALUES (12, 'Twelveth Row', '2025-05-29 21:04:13', '2025-05-29 21:04:20');

SET FOREIGN_KEY_CHECKS = 1;

This is the look of Modal dialog when No header/footer option enabled for that Custom File:


as you can see, the Footer section does not display the “Close” button (that is the issue at the moment).

And here is the look of Modal dialog when No header/footer option disabled for that Custom File:


as you can see, the Footer section of Modal dialog display the “Close” button as expected, by changing this code:

$SkipHeaderFooter = true;

to:

$SkipHeaderFooter = false;

from models/MyCustomData.php file.

There is no buttons in your content. You need to provide them so they can be moved to the modal footer. Refer to, for example, Edit page, as example.

I did. Here is the additional code at the bottom of my Custom File:

<div class="row ew-modal-buttons">
	<button type="button" class="btn btn-default ew-btn" data-bs-dismiss="modal">Close</button>
</div>

Unfortunately, the result is not as expected. That “Close” button does not move to Footer of Modal dialog:

That means, adding a new button inside the content of Custom File does not help at the moment.

The only thing that still bothers me is, why if I change from this code:

$SkipHeaderFooter = true;

to:

$SkipHeaderFooter = false;

directly impacts displaying the “Close” button on the Footer of Modal dialog?

I even checked there is no correlation between that PHP variable above and the related code in js/ew.js that will display the button on the Footer of Modal dialog.

<?= $Page->IsModal ? '<template class="ew-modal-buttons">' : '<div class="row ew-buttons">' ?><!-- buttons .row -->

...your buttons of the page...

<?= $Page->IsModal ? "</template>" : "</div>" ?><!-- /buttons .row -->

Ah, I see. Finally, after changing the related code to the buttons above, I got this working now. Thanks!

<?= (IsModal()) ? '<template class="ew-modal-buttons">' : '<div class="row ew-buttons">' ?><!-- buttons .row -->

<?= (IsModal()) ?
'<div class="ew-modal-buttons">
	<button type="button" class="btn btn-default ew-btn" data-bs-dismiss="modal">Close Modal</button>
</div>' : '' ?>

<?= (IsModal()) ? "</template>" : "</div>" ?><!-- /buttons .row -->