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.
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 am developing MVC application where people can sign up. After signing up, a page will display confirmation message using bootstrap modal. The modal block on the view is checking a session variable first, if the session is not null, then it will be displayed:
#if (Session["signUpName"] != null)
{
<!-- Modal start -->
<script type="text/javascript">
$(window).load(function(){
$('#signUpModal').modal('show');
});
</script>
<div class="modal fade" id="signUpModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data- dismiss="modal">×</button>
<h4 class="modal-title">Registration Confirmation</h4>
</div>
<div class="modal-body">
<p>Dear #Session["signUpName"]</p>
<p>Thank you ......</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal end -->
}
My issue is after signing up, I can't get rid of the modal window!! I tried to make the session equals to null inside the if statement with no luck.
Any ideas?
Don't use Session for this. The whole point of MVC is to use Models for your views.
So, create a model class to hold whatever data you need for the view. The moment you start using session and think about clearing it in the view you've gone as far away from MVC as you can get. This isn't webforms or classic asp, you need to think in a different way.
So, you could create your model from Session values. If you need to clear the session, do it in the controller, before you load the view. Keep your view as dumb and as simple as possible as you can.
public class UserModel {
public string Username { get set }
}
in the controller you take care of populating the model
public ActionResult SomeAction()
{
model = new UserModel { Username = Session["someSession"] == null ? "" : Session["someSession"].ToString() }
return View(model);
}
In your view I would not combine razor and Javascript like that. You can assign values to JavaScript variables from a model
so, in JavaScript you could do something like this:
var username = '#Model.Username';
now you can continue with your js code and check if you have a value or not.
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.