Add icon/image to GlideModal popup title

[hardikpanch_433]

Hello All,

I have a requirement to add icon/image on the GlideModal popup title as highlighted below.

Please refer to my current script:

Client script:

var dialog = new GlideModal('test_popup', false);
    dialog.setTitle(new GwtMessage().getMessage('Attention: The Implementation Mode is missing'));
    dialog.setSize(600);
    dialog.setBackdropStatic(true);
    dialog.render();

UI Page:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g:ui_form>
        <table width="100%">
            <tr id="description_row" valign="top" style="height: 130px;">
                <td colspan="2">
                    <!-- Short description value used as a label -->
                    <p>${gs.getMessage('Test Data')}</p>
                    <p>${gs.getMessage('Test Body')}</p>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                </td>
            </tr>
            <tr id="dialog_buttons">
                <td colspan="2" align="right">
                    <div>
                        <button class="btn btn-default" id="cancel_button" onclick="cancel()" style="min-width: 5em;" title="">${gs.getMessage("Cancel")}</button>&amp;nbsp;&amp;nbsp;
                    </div>
                </td>
            </tr>
        </table>
    </g:ui_form>
</j:jelly>

I'm only able to add text in the title but not image.

Please help.

Thanks

[Renat Akhmedov]

Hello Hardik,

To add an icon or image to the GlideModal popup title, you can modify the title dynamically after rendering. While setTitle() does not interpret HTML directly, you can initially set the title with basic text and then use JavaScript to update it once the modal is fully loaded. After calling dialog.render(), use setTimeout() to target .modal-header .modal-title and replace its content with an HTML string, such as <img src="/path_to_icon/icon.png" style="width:20px; height:20px; margin-right:5px;"> Attention: The Implementation Mode is missing.

If you prefer FontAwesome icons, which I prefer, you can use <i class="fa fa-exclamation-circle" style="color:red; margin-right:5px;"></i> instead. This ensures that the title correctly displays both text and an image/icon.

Hope it helped you somehow, 

Best regards,
Renat Akhmedov

[hardikpanch_433]

Hii @Renat Akhmedov , thanks for your reply.

Can you please share an example or a code snippet so I can understand where to use .modal-header and .modal-title.

Thanks.

[Renat Akhmedov]

Hi, sure, take a look at the function below:

setTimeout(function () {
var modalTitle = document.querySelector('.modal-header .modal-title');
if (modalTitle) {
modalTitle.innerHTML = '<img src="/path_to_icon/icon.png" style="width:20px; height:20px; margin-right:5px;"> Attention: The Implementation Mode is missing';
}
}, 500);

Hope it helps,

Best regards,

Renat Akhmedov

[Martin Friedel · Accepted solution]

Hello, insert this code into UI Page's HTML field:

<script>
	var uiPageName = 'test_popup';
	var modalTitle = document.getElementById(uiPageName + '_title');
	
    if (modalTitle) {
        var iconElement = document.createElement('i');
        iconElement.className = 'icon-alert-triangle';
        iconElement.style.marginRight = '5px';
        iconElement.style.color = 'red';

        modalTitle.insertBefore(iconElement, modalTitle.firstChild);
    }
</script>

Looks like this:

If my answer helped you, please mark it as correct and helpful, thank you 👍
Martin