I’m really struggling on making my add a page option work the way it’s supposed to, I don’t know where to start with my html, css or javascript structure , I have tried following tutorials and tweaking them to my project but none of them work.
Ok so my desired result is to be able to click on it and a modal-style box pops up with options one of them being that you can resize it to be full screen and then it automatically becomes a new page and opens a new file.
So something like this
I honestly just need some help on where to start because whichever modal tutorial I follow seriously doesn’t work.
So where would I start in terms of just making it so a box shows when I click on the add a page option (That box being a div box which I can customise and fill with content)
we cant really help without seeing your code
Hello,
I think what you are looking for is the HTML dialog element, as stated by the MDN documentation: `The HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
The HTML element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.`
: The Dialog element - HTML: HyperText Markup Language | MDN (mozilla.org)
I think you can then use JS or any other frontend framework to change the nature of this element from dialog to a div with certain styles to become full screen or a link that redirects to a template of a new page
ok here is what I think would be relevant for you to help me
my html for my add a page element
<li><a href="#" id="addPageButton"><i class="fa-solid fa-note-sticky"></i>+ Add a Page</a></li>
This is the html in my specific addapage file
</head>
<body>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">Example Modal</div>
<button class="close-button" id="closeModalButton">×</button>
</div>
<div class="modal-body">
This is the modal content.
</div>
</div>
<div id="overlay"></div>
</body>
</html>
</body>
</html>
It doesn’t really do much but if you want any more code in specific lmk.