Notification Popup Customization

I would like to customize the popup notifications, but can't find its code in the source code. I have looked at ...Views\Shared\_Notifications.cshtml and can see the dialog-notification-success, ...-error... etc. but I can't see where to access and edit their parent div which renders as:

<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="dialog-notifications-success" aria-labelledby="ui-id-3" style="position: absolute; height: auto; width: 350px; top: 1168px; left: 320.5px;">

Where can I find THAT in the source code? Thank you for your help, my apologies if this has been asked before. I searched the forums but couldn't find it.

Search the solution for:  dialog-notifications-success

\Presentation\Nop.Web\Views\Shared\_Notifications.cshtml

And JavaScript can change some the elements in the div
\Presentation\Nop.Web\wwwroot\js\public.common.js

Thank you for the reply, although it doesn't quite answer what I was asking. I did actually find the code in the _Notifications.cshtml file. I looked in public.common.js per your recommendation, thank you, but I still don't see where/how to edit the parent of

 <div id="dialog-notifications-success">

. It's not the "dialog-notifications-success" or its siblings I want to edit, I mean I do, but I found that. I don't see where their parent div is being created and injected.  This div:

<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="dialog-notifications-success" aria-labelledby="ui-id-2" style="position: relative; height: auto; width: 350px; top: -1134.97px; left: 12.5px;">

That div I can't find how it's being created. I want to edit THAT.  I really do appreciate your response, and I apologize if I didn't understand your response fully, I just don't see how to edit the parent div.

New York wrote:

I can't delete my other response, but I was able to reference the public.common.js and do what needs to be done. Thank you for your help.

So I was able to work with the <div id="bar-notification" class="bar-notification-container" data-close="@T("Common.Close")"> element in the _Notifications.cshtml but this in only part of what I'm trying to accomplish.

I'd like to learn about how, in the _Notifications.cshtml file, does <div id="dialog-notifications-success" title="@T("Common.Notification")" style="display:none;"> element get wrapped up in a parent div when, say, you get a PM?

Currently when you get notifications that you have a new pm, NOP is rendering this:

<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="dialog-notifications-success" style="position: relative; height: auto; width: 350px; top: -1011.48px; left: 471px;" aria-labelledby="ui-id-2"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-2" class="ui-dialog-title">Notification</span><button type="button" class="ui-dialog-titlebar-close"></button></div><div id="dialog-notifications-success" style="display: block; width: auto; min-height: 126px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content"><p>You have 4 unread message(s) in your Inbox</p></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>

All I want is an html <dialog> element. This was the modification I did for the bar-notification element:

<dialog id="bar-notification" class="bar-notification-container position-absolute top-50 start-50 translate-middle rounded px-2 py-3 min-vw-90">
    <div>
        <button type="button" class="btn btn-primary form-control mt-3" bar-notification-modal-close-button>
            @T("Common.Close")
            </button>
    </div>
</dialog>

This gives me a native dialog element, and that's what I want for all the notifications. A simple, html dialog element and not all this:

<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="dialog-notifications-success" style="position: relative; height: auto; width: 350px; top: -1011.48px; left: 471px;" aria-labelledby="ui-id-2">

.

Please help.

New York wrote:

I found the culprit. in public.common.js:

container.dialog({
    modal: isModal,
    width: 350
});

It's the .dialog(); that performs all the magic. I don't know how to close this forum post, but it is done. Thank you for your help!