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.