Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

How can I use Modal in Metronic Theme


I added assets files to my mvc project. I can't create a modal. What codes and files do I need to add to my project to open a modal when a link is clicked as soon as possible?
I've been dealing with this job for hours and I'm starting to think that I don't deserve my salary. I would be very happy if you can help :D


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 (3)


Hi Tarik,

Thank you for reaching out to us.

To use our theme you need to load two main js and css files.
CSS:

"plugins/global/plugins.bundle.css",
"css/style.bundle.css"


JS:

"plugins/global/plugins.bundle.js",
"js/scripts.bundle.js"


Please note that these two files are mandatory for theme to be working fine. The bootstrap dependency is included into plugins/global/plugins.bundle.js.

For modal usage examples, you can refer to our documentation.
https://preview.keenthemes.com/html/metronic/docs/base/modal

Let me know if you will need any further help on this.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Thanks for your help it worked.
I put the files you said in _layout.cstml and run it on my modal page. But what I want to do is to display a view in a modal.
For example, something like this;

<a data-bs-toggle="modal" data-bs-target="#kt_modal_1" href="/Home/Index/@item.ID"></a>
<div class="modal fade" tabindex="-1" >
</div>

It will display a view in a modal using dynamic ids.
Since the IDs are dynamic, the content must be reset every time the modal is closed. Because when the next ID is clicked, a special view will be shown to it.

I started researching happy . Any help would be appreciated. Big step for me, small step for you happy



Hi Tarik,

Could you please provide us with more info on what you are trying to achieve?

It sounds like something not standard use case for modal, you can consider handling this on a separate view.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(