Inactive bootstrap modal on button click - asp.net-mvc

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

Bootstrap5 JavaScript functions are not working in shadow DOM lit element

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 :)

How to show Ruby Rails Form Modal popup on button click?

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.

Add Record to Entities Modal bootstrap

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

Modal bootstrap, image instead of button

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.

Twitter Bootstrap Modal opening multiple backdrops, glitch in Grails

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:

Resources