Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

_UserAccountMenu.cshtml Pop Up Modal


im try to modify and add a change password button here

_UserAccountMenu.cshtml

and this is how i code it

<!--begin::Menu item-->
<div class="menu-item px-5">
Change Password
</div>
<!--end::Menu item-->

and in the lower part i added this for my modal

@await Html.PartialAsync(KTTheme.GetPageView("Menus", "UpdatePassword.cshtml"))

but then is working and displaying.. but my problem is that my screen become darker and i cant click anything inside my modal. i need to reload my browser


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)


Hi,

May I know which is your Metronic version? Have you referred to the online documentation of your used Metronic Modals?

Will it be possible to send us a test link of your developing or or at least a full code of your modal that you are trying to launch.

Regards.



metronic_asp.net-core_v8.2.7

https://docs.google.com/document/d/1QjVX22Y_-jzLIElMNeUrZsQuOAGWGdntmaEBpnm6pIs/edit?usp=sharing



Hi,

Your code looks correct. But the modal HTML code i placed outside dropdown menu code ? Can you try to launch other basic model(get a fresh modal from Metronic online docs) and try to launch it in your page just to test it ?

if you need further help will it be possible to send us a test link in a private reply ? The issue seems related to modal HTML code placement. it should be placed under body if possible or at least it's parent should not be absolute or fixed positioned element.

Regards



https://github.com/Spyrix-19/test

here is my sample code in github



im using this as my template

metronic_asp.net-core_v8.2.8

can we make this
> DefaultDarkHeader.cshtml
> DefaultDarkSidebar.cshtml
> Footer.cshtml (fixed only the content will change.)



Hi,

Can you please move all Modal code under the body tag level ? If you include the modal code inside a fixed header element it does not work properly.

As per the original HTML templates, the modals should be under the body tag, not inside the header.


<body>
@await Html.PartialAsync(KTTheme.GetPageView("User\\Modal", "UpdateContactNumber.cshtml"))
@await Html.PartialAsync(KTTheme.GetPageView("User\\Modal", "UpdateEmailAddress.cshtml"))
@await Html.PartialAsync(KTTheme.GetPageView("User\\Modal", "UpdatePassword.cshtml"))
@await Html.PartialAsync(KTTheme.GetPageView("User\\Modal", "UpdateProfilePicture.cshtml"))
</body>


Regard



Hi,

Fixed footer layout mode is not available at the moment.

We will consider enabling it in a future update.

Regards,
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(