I created a button that references a modal but it doesn't open the modal at all. This area of code isn't my realm, SQL is. This code actually lives in an SQL procedure that is called when interacting with a website.
Thoughts?
--Remove package item, Modal Popup
<div id="delete_btn_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class=modal-body>
<h3><font color="red" align="center">Are you sure?</h3></font></br>
<p>Deleting a package item will remove the entire package</br></br>
<button type="button" class="btnStyle" data-dismiss="modal">Close</button>
<button type="button" class="btnStyle" onclick=location.href="http://wowfestival.lajollaplayhouse.org/cart/precart.aspx?p=499">Delete Package</button>
</p>
</div>
</div>
</div>
--button
<button type="button" class="btnStyle" data-toggle="modal" data-target="#delete_btn_modal">Delete</button>
Seems you have not added bootstrap javascript
Your code is perfect and fine
Check the bootply for your code. : http://www.bootply.com/zOa8UJ4Vfb
Also check you you have jQuery included as well .
If not use below cdn for quick test.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Related
I am working on Angular project, launching popup model when my function getting called. I found example on w3schools but this is has all html logic to open it.
I want to open it from ts file when openPopup() function getting called.
popup model html code from given link.
<body>
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
</div>
</div>
</div>
</div>
</body>
This is button to open popup
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
How can I replace this code to ts file events ?
create a variable like this. and remove toggle elements from modal.
// in ts
openModal: false;
//then in button click event:
<button (click)="openModalClick()"></button>
//in ts:
openModalClick(){
openModal=!openModal;
}
//in html
<div class="modal fade" id="myModal" *ngIf="openModal">
</div>
this will work in ts way, if you want to toggle with bootstrap,
then select button with id and use java script .click().
I can run my code just fine locally. Everything seems to be perfect. But as soon as I upload my repository to Git-Hub and try to run it with Git-hub pages, part of the website breaks? Specifically, the only issue is the Modal that's supposed to run when I click 'add to library' on the nav bar.
I tried deleting it off Git-Hub and reuploading it. I've tried moving the files around but nothing seems to work. I'm really not sure what the root of the issue is (?)
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-secondary"
data-toggle="modal"
data-target="#libraryModal"
>
Add to Library
</button>
<!-- Modal -->
<div
class="modal"
id="libraryModal"
tabindex="-1"
role="dialog"
aria-labelledby="libraryModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-primary" id="libraryModalLabel">
Add to Library
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input
type="text"
class="form-control mb-2"
id="englishField"
placeholder="English"
/>
<input
type="text"
class="form-control"
id="spanishField"
placeholder="Spanish"
/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="addWord">
Add Word
</button>
<button type="button" class="btn btn-primary" id="addPhrase">
Add Phrase
</button>
</div>
</div>
</div>
</div>
Expected: It would open up a modal with two text boxes and two buttons.
Actual: https://at-lowdesu.github.io/EstudiarEspanol/#study-inner (It doesn't open.)
Git-Hub Link: https://github.com/At-LowDeSu/EstudiarEspanol
You have a mixed content error. All src should link to https://.. but you have one with http://
<script
src="http://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
Replace http://code.jquery.com/jquery-3.4.1.min.js with https://code.jquery.com/jquery-3.4.1.min.js
I was able to fix it by changing the jQuery script call.
<script
src="//code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
The jQuery is not loaded or blocked in your page. The console said Blocked loading mixed active content “http://code.jquery.com/jquery-3.4.1.min.js”
You should fix this first, since bootstrap uses jQuery for its to run.
I've tried to inject the jQuery manually to the page and it works just fine.
Bootstrap Modal :
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
you can refer more examples of the modal.
In my Laravel project , I use AdminLTE and I want to use modals in it.
all part of AdminLTE works great. but, I can't use modals. I don't know how to use it. should I add any js code for it?
scripts:
<script src="{{asset('bower_components/jquery/jquery.js')}}"></script>
<script src="{{asset('bower_components/bootstrap/dist/js/bootstrap.js')}}"></script>
<script src="{{asset('bower_components/admin-lte/dist/js/adminlte.js')}}"></script>
<script src="{{asset('bower_components/datatables.net/js/jquery.dataTables.js')}}"></script>
<script src="{{asset('bower_components/datatables.net-bs/js/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.full.js')}}"></script>
I want to have some thing like this : https://adminlte.io/themes/AdminLTE/pages/UI/modals.html
Its not Related to Laravel As long as it concerns The modals and Design
so now you have To Check your console For any Error And see If there is any error on console for that modal and if not you have to check any kind of js for modal or bootstrap for modal and in the end you can check from this link for cdn usage of modal plugin for bootstrap :
https://cdnjs.com/libraries/bootstrap-modal
and if not finally check the atrribute of modal and bottuns :
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
this is an example paste this code and check if its working on your project .
I had mistake in css loading and also I didn't add modal's js file :
<script src="{{asset('bower_components/bootstrap/js/modal.js')}}"></script>
I have a confirmation dialog that is resurfacing on some pages so I thought that I can make a thymeleaf fragment for it.
I created a new html page (modal.html) and a div containing the modal:
<div th:fragment="confirm">
<div id="confirm" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Please confirm</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
</div>
</div>
</div>
</div>
</div>
Then I included it like this on the pages:
<div th:include="fragments/modal :: confirm"></div>
This kind of syntax worked for my header.
The problem is that it is visible at all times now.
When I include the same modal code on the page directly it only pops up when toggled.
Can someone help me?
Thanks!
The modal CSS class has display: none;, so it's hidden by default.
Your div that includes the fragment probably is inside an element that has a CSS class that sets the CSS display property to something different than none, and overwrites the modal CSS class.
Check in the developers extension (F12) the style of the element to see what overwrites the display property
And make sure you include
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"/>
Any modal that I am creating using twitter bootstrap fails to appear. I'm not sure what I'm doing wrong seeing that I set up a test modal using the code that bootstrap provides and it still doesn't work.
Here is my code (body only):
You need to link to bootstrap.js, bootstrap-modal.js, jquery.js, and bootstrap.css
<body>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
Modal body would go here...
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<a data-toggle="modal" href="#myModal">Show Modal</a>
</body>
And here are links to the bootstrap package and jquery that a bootstrap modal needs:
bootstrap package
jquery
My problem was that I was including both boostrap.js and bootstrap-modal.js. Apparently if you include bootstrap.js you shouldn't also inlclude bootstrap-modal.js because boostrap.js imports all of the javascript plugins that it is compatible with. Something like that. After deleting my boostrap-modal.js script link it worked.
You have to call:
<script>
$('#myModal').modal('show')
</script>
After the </body> tag. Or if you only want to call it when the user clicks on something:
$('#button_id').click(function(){
$('#myModal').modal('show')
});