I am working on a Rails site that uses twitter bootstrap.
When a user click on a link, the site sends a ajax call to a controller and the controller render a partial(the modal).
.js file:
$ ->
$('#play').click (e) ->
e.preventDefault()
$.post "/hype", (data) ->
$("#hhh").html data //a dummy div to put the data (I dont use this)
items controller:
def hype_modal
#item = Item.where(:end => Time.zone.now .. '2040-12-28 08:08:00').order("launch ASC").limit(1).first #Item.find_by_rank(1)
render "items/partial/_hypemodal"
end
The partial(modal) (items/partial/_hypemodal.html.erb)
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="tr">
<div class="modal-body"><%= raw #item.link %></div>
</div>
The link works just fine (I can click it, and the modal opens). The problem is that it won't close if I click outside the modal (this is normal behaviour, so it should work...). The other problem is that the background won't dim (get darker).
Any suggestions?
Try this
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="tr">
<div class="modal-body"><%= raw #item.link %></div>
For the closing issue, are you getting any errors from the console?
Related
I have a controller in my Rails application which calls a js partial when a certain condition is met:
my_controller
if false == validation_result
render :partial => 'my/show_modal.js.erb'
end
_show_modal.js.erb
$("#modal_content").html("<%= escape_javascript(render 'my/show_modal') %>");
$("#notify").modal('show');
The html.erb called from above code renders a modal as shown below:
_show_modal.html.erb
<div class="modal fade" tabindex="-1" id="notify" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="width:1000px;margin-left:-285px !important;">
<div class="modal-body">
<h3 class="modal-title">Please review</h3>
<span style="float: right">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</span>
</div>
</div>
</div>
</div>
The modal renders fine; but when I click on Ok button on the modal, the modal dismisses fine as well but leaves behind a light gray scheme on the entire webpage (the webpage seems to loose focus and I have to refresh the page to be able to use it again)!
What am I doing wrong here? How do I dismiss the modal completely so that the webpage could be used again?
UPDATE:
I tried almost all the approaches suggested in how to destroy bootstrap modal window completely? but NONE of them work for me.
I even posted comments on a few approaches listed on the above page stating the backdrop still does not go away for me.
Maybe this is a very ancient-minded-approach but it supposed to work. Assign hideModal() function on click event and see the result.
function hideModal() {
$("#notify").css("display", "none"); // Removing modal container
$(".modal-backdrop").css("display", "none"); // Removing semi-transparent black background
$(".modal-open").css("overflow-y", "auto"); // Enabling vertical scrolling back
}
I am using a bootstrap modal in the header - layout page for the entire site
e.g. original code from bootstap
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Login demo modal
</button>
<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-body">
Login information
</div>
</div>
</div>
</div>
The above code does work.
I modified the button code to link
Launch login demo modal 2
When user clicks on the link the code works, but now the user has access to the url link and could open in a new window/new tab
When user right clicks on the link and choose "open in a new tab" it would fail because this page does not open.e.g.
http://example.com/account/login#myModal
http://example.com/blog#myModal
Question : Is it possible if user opens in a new tab the url, redirect to
http://example.com/account/login page
a live example fiverr.com (click on join a modal opens) and can also access direct link fiverr.com/join I am using MVC, maybe using a route configurations?
You cat do it with JavaScript. Just get the part of URL after hash and check if it is what you are expected, and then open modal manually:
if(window.location.hash) {
var hash = window.location.hash.substring(1);
if (hash == "myModel"){
$('#myModal').modal('show');
}
}
Make sure, that code is being executed after page is loaded.
I have multiple modals in one html file for my Rails application and 2 modals have tabs in them. The issue I am facing is that for one of the modals the tabs do not change content when I click through them. I know its not a modal specific problem as I realized that if I move the code around (put one modal before the other), the tabs work, only for one modal at a time though.
Specifically, the problem is in showModal and addStudent, if I put anything before addStudent, the tabs for that modal work, but addStudent tabs dont work. Same vice versa if I put the modal after. I can't seem to figure out how to to fix this or why it is happening. Here is a collapsed version of the code:
<!-- Birthday Modal -->
<div class="modal fade" id="birthday" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- Reports Modal -->
<div class="modal fade" id="reports" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- addStudent modal -->
<div class="modal fade" id="addStudent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- Show Modal -->
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- Support Modal -->
<div class="modal fade" id="support" role="dialog">
Are you able to make a codepen or jsfiddle for your problem? It really helps to customize the answer for you.
My website has a payment form in a modal. All I want is (for some specific customers) to pass them a link and when they click on it to move to the website with the modal already be open.
Is that possible?
You must facilitate the feature yourself. Lets say you have normal bootstrap modal like this :
<div class="modal fade" id="payment">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
and you want to invoke the modal on page load in a link sent to some users :
http://www.example.com#payment
Then add this code snippet to your page :
$(document).ready(function() {
var modals = ['#payment', '#anotherModal'];
if (window.location.hash && ~modals.indexOf(window.location.hash)) {
$(window.location.hash).modal();
}
})
This is of course by far the most simple way to do it.
I am using Rails 3.2 and the twitter-bootsrap-rails gem (link).
I have a modal, this is the html.erb:
<div id="myModal" class="modal hide fade in" style="display: block;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3><%= t '.add_category_title' %></h3>
</div>
<div class="modal-body">
<%= render :partial => 'wgform' %>
</div>
</div>
this modal should be hidden when the page loads, and triggered with a button:
<a class="btn" href="#myModal" data-toggle="modal"><%= t '.add_category_btn' %></a>
but for some reason, the modal appear when the page loads, with css attribute "display:block;" (it should be "display:none;").
The "X" on the top right works right to dismiss it, and the button correctly shows the modal (if clicked after closing it).
The strange thing is that all was working one hour ago, and I didn't modified that file.
I'm stuck, don't know where to look.
<div id="myModal" class="modal hide fade in" style="display: block;">
why do you have style="display: block;" there? remove it
Solved editing bootstrap.js.coffee (see the comments above).
bootstrap.js.coffee:
$ ->
$("body > .topbar").scrollSpy()
$ ->
$(".tabs").tabs()
$ ->
$("a[rel=twipsy]").twipsy live: true
$ ->
$("a[rel=popover]").popover offset: 10
$ ->
$(".topbar-wrapper").dropdown()
$ ->
$(".alert-message").alert()
$ ->
domModal = $(".modal").modal(
backdrop: true
closeOnEscape: true
)
$(".open-modal").click ->
domModal.toggle()