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
}
Related
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 am using rails, materializeCss modal and braintree 'dropin' to process my forms. I embedded the braintree "dropin" in a div in the form that has a modal class. When you click the checkout button it opens the div with the 'dropin' and form submit button. However the modal div is hidden behind the dark overlay when the checkout button is clicked.
<%= form_for([#listing, #listing.order.new]) do |f| %>
//lots of code
<!-- modal trigger start -->
<button class="modal-trigger btn btn-large waves-effect cyan waves-light" id="book" data-target="modal1">Proceed to Checkout</button>
<!-- modal trigger end -->
<!-- modal start -->
<div class="modal " id="modal1" >
<div class="modal-content">
<h4 id="credit-text center-align">Enter your Credit card details </h4>
<div id="dropin"></div>
<button class="btn btn-large center-align" type="submit" name="action">Request Booking</button>
</div>
</div>
<!-- modal end -->
<% end %>
//added an alert just to make sure the modal is firing.
<script>
$(function(){
$('.modal-trigger').leanModal({ ready: function() { alert('Ready'); }});
});
</script>
I think the fact that the modal div is inside the form may have something to do with it but the forms submit button is inside the modal so I cant put the modal outside the form. How can fix this ? Is there a better way of implementing a modal checkout ?
You might be overwriting z-index CSS rules while styling your modal.
Make sure that your .modal has higher z-index than the overlaying dark background.
I have a Rails view with two icons. Each icon should open a different modal (using a partial).
The issue is that both icons are opening the same modal (the first one).
Here is the code to display the modals:
<a data-toggle="modal" href="#workorder-<%= workorder.id %>">
<i class="icon-list"></i><%= workorder.wologs.count %>
<%= render :partial => "wologs/history", locals: {workorder: workorder} %>
</a>
<a data-toggle="modal" href="#workorder-<%= workorder.id %>">
<i class="icon-ok-sign"></i><%= workorder.tasks.count %></a>
<%= render :partial => "tasks/taskslist", locals: {workorder: workorder} %>
</a>
Thanks for the help!
As MrYoshiji already mentioned the reason is two links point to same id, so same modal launched.
I would like to add that it's also incorrect to put the modal body inside link, if the partial is modal body.
According to Bootstrap example:
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
The link and modal are two totally different divs.
So the fix is:
Launch partial in different div and assign different ids to them.
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?
I am trying to render the outcome of an action into a modal (twitter bootstrap). Unfortunately I do not get this to work.
Before I was generating a link within an each iterator:
<g:link action="perform" id="${exerciseInstance.id}">
<h2>${fieldValue(bean: exerciseInstance, field: "title")}: (${exerciseInstance.questions.size()} Questions)</h2>
</g:link>
Instead of rendering a complete new site I rather want the quiz to be presented in a modal. Therefore I tried a simple twitter bootstrap modal example:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">${fieldValue(bean: exerciseInstance, field: "title")}</a>
<div id="myModal" class="modal hide fade" style="display: none; ">
<div class="modal-header">
<h3>Test</h3>
</div>
<div class="modal-body">
--> This is where the content should go <--
</div>
<div class="modal-footer">
Close
</div>
</div>
What is the best way to achieve this?
Asking for the "best way" on SO is a dangerous game. There probably isn't a best. Just different approaches. I'll give you one that I use utilizing jQuery's $.load() function.
$("#myModal .modal-body").load(url);
It really is that simple. Obviously, adjust your load() function if you need to pass in parameters, provide a callback function, etc. Your controller's action would just render a template containing the HTML you want in your modal-body. This isn't really even Grails specific. This approach would work with any server side tech.