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.
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
}
Currently I'm using a Model that after posting back from a Form I look at a model property to display an Alert. However I now need to have a Modal displayed instead. I know I need a Modal div at the bottom of my page to display but I can't figure out how to call that from the Razor Model.
Researching ideas all I've found is where a button click or some click event would call some JS and show the modal. I can't find anything on how to just open it from the View.
The concept is that the end user will click a button do basically do like a Time Stamp into the database. In the controller I set a MessageType property and then based on that I would show say a Bootstrap Error Alert if there was an error or Success Alert if everything was okay. Now instead of calling the Success Alert I need to open a Modal.
Here is how I'm doing it now with an Alert. This is in my MVC View. Is there a way to do the same but instead of Alert open a Modal?
#if (Model.MessageType == "PUNCH")
{
<div class="alert alert-success">
<h3>Punch accepted at <strong>#Model.CurrentTime.</strong></h3>
</div>
}
Similar to what you did, you may execute the javascript code which shows the modal dialog.
Assuming you have the required bootstrap files loaded to your page,
<!-- 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" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#section Scripts
{
#if (Model.MessageType == "PUNCH")
{
<script>
$('#myModal').modal();
</script>
}
}
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 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.