I am currently working on a simple Modal dialog, that should open on a button press; Figuring I´d use the bootstrap example (https://getbootstrap.com/docs/5.0/components/modal/) as a starter would be the best quick win.
As I am using pug as a view engine, I`ve quickly converted the HTML into Pug and tested it without success.
The Modal Container is not showing / popping up. I don`t get any errors within my console. Bootstrap is functioning perfectly.
The pug code:
include modules/head
// Button trigger modal
button.btn.btn-primary(type='button' data-bs-toggle='modal' data-bs-target='#exampleModal')
| Launch demo modal
// Modal
#exampleModal.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true')
.modal-dialog
.modal-content
.modal-header
h5#exampleModalLabel.modal-title Modal title
button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close')
.modal-body
| This is a test.
.modal-footer
button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
sdsadHead includes both jquery and bootstrap (v4.4).
Does anyone have any ideas why it wouldn`t work?
Suggestions about fade css settings couldnt help.
Thanks in advance.
As proposed by Sean above the issue was an incorrect load of the Bootstrap.js file.
Fail by developer.
Related
For a project, I have to use a Modal (pop up) which I prefer to use Bootstrap for.
However the project (which was original built with their own custom code so no bootstrap), when I do add the bootstrap links (into the head the script, and css links etc) into it, it now changes the my own .container classes to Bootstrap their values...
How can I ignore those?
Go here
https://getbootstrap.com/docs/3.4/customize/
Remove everything except modal
then click Compile and Download
It's bootstrap 3.4 but I don't think modal component went through a lot of changes.
I made a project .net core MVC. I am using semantic-ui-react modal and importing its library and link css to work on it, but the problem is the bootstrap css made a conflict with my other CDN semantic-ui-css.
What I meant by that, I open the modal and its is swapping every seconds into the div: ui modal transitive visible to ui scrolling ...
I made some tests to see that is bootstrap is not friend with semantic-ui-css
because I remove the link css and it works but I cannot keep the bootstrap style for my header nav-bar.
Someone knows how to deal with that ? Thanks:)
have you tried to install the css and then import it :
https://react.semantic-ui.com/usage
I use Shaper Helix 2 in my template, and I try to create the carousel. I use Joomla version 3.2, and use CustomHTML to create the carousel. But I do not know why it does not recognize as HTML, and it actually recognize as Text.
So in my home screen, the carousel show the code:
[carousel]
[carousel_item]add image here [caption]Powerful templates framework to develop Joomla base website faster![/caption][/carousel_item]
[/carousel]
not the actual carousel text.
How to solve this? Thank you very much. Appreciate a lot for someone help.
While in the Module Manager menu, go to the Options tab of your Module Custom HTML item and click Prepare Content -- Yes. Then Save. Voila!
I have 2 html files
login.html
splitView.html
In login.html, I have written this code on button click for page navigation
$.mobile.changePage("splitView.html", "slideup");
I am able to navigate to splitView.html page. But the following function is not getting called on page load.
$(document).ready(function() {
}
Please suggest me what I am doing wrong ??
Thanks
You don't use $(document).ready(function(){}) in Jquery Mobile. You use pageInit() instead.
More info at Jquery Mobile Docs
I am looking for a simple Modal Window Lib in JS.
What I require from it, is to be able to
. load a url response into the modal
. load text in to the modal
What are the options I have ?
Note: I am using jQuery. Therefore, I can use a jQuery Modal plugin as well.
Thanks,
Prakash Raman
Check out Jquery UI's Modal Window.