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>
Related
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 :)
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.
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.
Using Grails 2.2.1, Twitter Bootstrap plugin. I'm using modals and mine are set up with 3 exit approaches. Either hit the x button, click a close button, the save button, OR, click anywhere outside the modal to close.
The problem is, 2 backdrops are being opened whenever I attempt to open a single modal due to the function I'm using. Why is this? With the first 3 modal closing approaches, it closes the modal, and both backdrops. But with the final approach, it just closes the modal and a single backdrop.
Here's my gsp code*sec* part is just a taglib for a security plugin I'm using):
<div id="loginModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="loginModalLabel">Login</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<div id="signupModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="signupModalLabel">Sign Up</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<g:link class="btn btn-primary">Create Account</g:link>
</div>
</div>
<sec:ifNotLoggedIn>
<g:javascript>
$('#loginModal').modal({
remote: "${createLink(controller:'login', action:'auth')}",
show: false
})
$('#signupModal').modal({
remote: "${createLink(controller:'user', action:'create')}",
show: false
})
</g:javascript>
<g:link fragment="loginModal" class="btn" data-toggle="modal">
Login
</g:link>
<br/>
<g:link fragment="signupModal" class="btn" data-toggle="modal">
Sign Up
</g:link>
</sec:ifNotLoggedIn>
I tried using:
$('#loginModal').modal({
remote: "${createLink(controller:'login', action:'auth')}",
show: false
})
$('#signupModal').modal({
remote: "${createLink(controller:'user', action:'create')}",
show: false
})
But I still get 2 backdrops opening when I click on a single modal link.
This seems to be a Grails issue, because I don't get this problem with jsFiddle: