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

[hardikpanch_433]

thanks @Martin Friedel 

I was able to add the icon using below.

<script>
            var uiPageName = 'test_popup';
            var modalTitle = document.getElementById(uiPageName + '_title');
            console.log('modal title is : ' + modalTitle);
            if (modalTitle) {
                var image = document.createElement('img');
                image.src='audio-alert.svg';
                image.setAttribute('height', '10px');
                image.setAttribute('width', '10px');
                modalTitle.insertBefore(image, modalTitle.firstChild);
            }
        </script>

can you please help me to add style like font-size to the modal title from this script?

Thanks

[Martin Friedel]

Hello,

I would be really cautious with customizations like this. You should keep unified out-of-box styling of the platform. 

To modify font just add these lines into script:

modalTitle.style.fontFamily = 'Arial, sans-serif';
modalTitle.style.fontSize = '16px';
modalTitle.style.fontWeight = 'bold';
modalTitle.style.color = 'red';

Martin