1
0
Fork
You've already forked Tools
0
Page: Modals
5 Modals
FileX edited this page 2022年12月19日 18:32:25 +00:00

So here we go. Our first one is going to be Modals.

Setup

Firstly, setup your HTML file correctly.

What you need is..

  • an element (preferably of type <div>) with the ID filex-modals
  • a script which calls the openModal() Function
  • a <script> tag to import the JS File (❗ You have to import it from the WebPage so it got the right format)
  • and if you want a <link> tag to import the CSS File

So this should look like this:

<!DOCTYPE html>
<html>
 <head>
 <!-- ... -->
 <link rel="stylesheet" href="https://filex.codeberg.page/Tools/web_plugins/modals_style.css">
 <!-- ... -->
 </head>
 <body>
 <!-- ... -->
 <div id="filex-modals"></div>
 <!-- ... -->
 </body>
 <!-- ... -->
 <script src="https://filex.codeberg.page/Tools/web_plugins/modals.js"></script>
 <!-- Script that calls the function -->
 <!-- ... -->
</html>

Rules

  • Your stylesheet has to be before openModal() gets called
  • <div id="filex-modals"></div> has to be inside the body element
  • The script tag with the modals.js File is after div#filex-modals is loaded
  • The scripts that call openModal() are after the import of the modal.js File

Function(s)

function openModal(t, c, id, classes): void

Parameter Meaning Type Example Notice
t title String "Test"
c content String "Hello, how are you?" Do not confuse with classes. Supported classes of elements:
- fxm-divider
id identifier String "my-unique-id" Each ID has to be unique in a HTML File
classes Array[Strings] ["success-modal-type", "some-class"] By CSS File supported Classes:
- success-modal-type
- warning-modal-type
- danger-modal-type