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.
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 trying to make a link to bootstrap modal through clicking image.
I'm basically trying to adapt bootstrap demo code to ruby tags.
<%= link_to 'data-toggle' => 'modal', 'data-target' => '#exampleModalLong' do %>
<%= image_tag("https://i.imgur.com/qtVofCH.jpg", :class => "portfolio-image") %>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
...
</div>
</div>
<% end %>
But this doesnt work. This makes it go to the top of the page, adding
?data-target=%23exampleModalLong&data-toggle=modal
to the url.
Edit1: Now i target the modal with just '#exampleModalLong':
<%= link_to '#exampleModalLong', 'data-toggle' => 'modal' do %>
<%= image_tag("https://i.imgur.com/qtVofCH.jpg", :class => "portfolio-image") %>
<% end %>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
...
</div>
But it still won't work properly. Atleast it doesn't bring me back on the top of the page. And adds
/#exampleModalLong
to the url.
I don't know why wont it trigger the modal div, when I target it through id.
This solution worked for me Modal bootstrap, image instead of button. Have you tried it?
Be careful to change the id of the modal to have the same in the data-target attribute of your <a> tag and in the id of the <div> for your Modal window.
<!-- Button -->
<a data-toggle="modal" data-target="#exampleModalLong">
<%= image_tag("https://i.imgur.com/qtVofCH.jpg") %>
</a>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" 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>
I have used react-native to open a WebView from a ruby on rails app. The page includes an unopened bootstrap modal. How do I open the modal using a react-native call, so the modal can be displayed without reloading the page?
The modal can be activated by javascript that runs in WebView page e.g.
$("#myModal").modal('show');
The modal might look like this
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</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>
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: