I have implemented web component using LIT Element and integrated bootstrap5 in it.
when I try to call modal/popovers/tooltip etc... it is not working.
render(){
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
}
when I click on button it is not responding.
Can any one help me how to enable the JavaScript functionality in LIT Element.
Thanks in Advance :)
Related
I'm using Bootstrap 5.1 in my ASP.NET MVC project and I want to add a bootstrap modal on button click. I got the modal from:
https://getbootstrap.com/docs/5.1/components/modal/
But when I click on the button the modal that appears is inactive. How can I make it active by default on button click. or is there something I'm doing wrong?
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
When some one click on a Add new button in index.html.erb the form popup will show on this page the form date will come from new.html.erb so how I can do this I am using bootstrap.
Please any example.
First of all, cpoy this modal code, it is official from bootsrap,
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Copy the modal from here and go to index.html.erb
Place a
<%= link_to (your_edit_path) do %>
# place modal here After inserting your required fields using form_for helper
<% end %>
now on the submit button rails will automatically send a post request to create action in your_controller. and boom, your task is done.
Do, let me know if you face any difficulty. I will help you in any case.
I'm having some trouble with a bootstrap modal in rails 4. I'm trying to display a modal when you click an image. And actually the modal is displayed, but only for a few seconds, and then it close itself.
(I'm using bootstrap-sass gem)
This is the code I have:
<%= link_to image_tag (destacado.imagen.small), data: {toggle: "modal", target: "#myModal"} %>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Any idea what I am doing wrong?? Thank you in advance for any help!
Peyu
I think this is because your link_to will redirect the page.
Not a lot of information is provided, so that's just my guess.
If you wanted your link to just do data-toggle behaviour, maybe it doesn't need to be a link, just an image_tag with data-toggle behaviour.
Im sure this should be easy, but I have searched and searched again and there is no a begginers tuto for this. I already did this with jquery ui dialog, but then I found bootstraps includes dialogs too(Modal). So can some one please guide me with a tuto link or just posting a simple answer here.
What I want to do is to show a popup to add a record to my database. I got this code from Bootstrap Page and it works, but I dont know how to add the record to my database when user clicks button, where is that event? or can I go to my controller after user clicks button?
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
1:
http://msdn.microsoft.com/en-us/data/jj592676.aspx
2:
http://msdn.microsoft.com/en-us/data/jj205424.aspx
3:
Insert data using entity framework code first
4:
http://dev.mysql.com/doc/refman/5.1/en/connector-net-tutorials-entity-framework-winform-data-source.html
I try to use modal from bootstrap, but instead of a button i would like to use an image. But i don't see at all how to do it. And where to insert
data-toggle="modal" data-target="#myModal
http://getbootstrap.com/javascript/#modals
bootstrap modal
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You can place the image inside a link like this...
<a data-toggle="modal" data-target="#myModal">
<img src="//placehold.it/100x30">
</a>
Demo: http://bootply.com/98748
You can keep the button HTML and add a background image to the CSS. See the example in this Stackoverflow question.