I would like to get a lightbox modal box to pop up automatically on page load.
My current anchor works perfect when I actually click it, and here is my bit of JQuery that I've been using so far.
<script>
$(document).ready(function(){
document.getElementById('popup').click();
});
</script>
And the HTML
<a id="popup" class="wb-lbx lbx-modal" href="#alert">test</a>
<section id="alert" class="mfp-hide modal-dialog modal-content overlay-def">
<div class="alert alert-info">
<h2 class="h4">header</h2>
<p>content</p>
</div>
</section>
Problem is, it just brings me to the #popup anchor location on the page, not actually triggering the lightbox that pops if you were to actually click it.
How do I trigger the click event on page load?
Thanks
Related
I am working in a foundation frame work for responsive.
on click of a link say
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-reveal>
<h2 id="modalTitle">Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins! </p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
I want as the window opens the focus is given to the myModal.
i am trying
$('a.button').on('click', function() {
$("#myModal").attr("tabindex","0").focus();
});
but it not working.
My script is running before the modal window opens and thus there is no such element available to receive focus.
You can set the focus on the whole modal.
$('a.button').on('click', function() {
$("#myModal").focus();
});
Is this what you where looking for?
I am trying to add an event to a jquery mobile footer. The source is like this below:
<div data-role="footer" id="footer">
<h2>footer</h2>
</div>
So, when I touch the footer area on the phone,
I want to show a website link.
How can this be done? I searched on google as usual but it didn't show what I needed. Thanks.
You just need to attach a on click event listener to the footer div and then toggle the link display when the footer div has been clicked
<div data-role="footer" id="footer">
<h2>footer</h2>
Some Link
</div>
<script>
$('#footer').click(function(){
$('#link').show();
});
</script>
JSFiddle: https://jsfiddle.net/na04dhet/
I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->
It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.
I have a form with three different data-role="page" with three different data-url="abc".
Based on some condition I am rendering/displaying some fields on the second page after clicking the button on the first page.
Now I am getting the second page
<a id="123" class="xxx" href="#secondPageId" data-role="button">GoToNextScreen</a>
Now in the second page URL i can able to see http://www.test.com/index.html#secondPageId
when i am in the second page If i refresh the browser,
Its showing all available controls in the second page.
But i need to display only few fields based on the button click.
How can i do that ?
If that is not possible, then:
While refreshing the browser by clicking "Browser Refresh button" or Pressing F5 I need to remove the #secondPageId from the URL.
So that i can able to go back to first page.
I have made a jsfiddle that illustrates a possible solution.
Basically, you can do this in two ways:
Initially hide all elements and use jQuery to show the required ones at pagechange.
Initially hide nothing at all, and use jQuery to hide the required elements at pagechange.
The fiddle uses the latter one.
HTML:
<div data-role="page" id="first">
<div data-role="header">
<h3>
First Page
<a id='Goto_page2' class='ui-btn-right ui-btn ui-corner-all ui-shadow'>NEXT</a>
</h3>
</div>
<div data-role="content">
<p>
Please go to next page.
</p>
</div>
</div>
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
<a href='#first' class='ui-btn-left ui-btn ui-corner-all ui-shadow'>HOME</a>
</h3>
</div>
<div data-role="content">
<div>
<p class="tobehidden">
This text was visible, but has been made hidden.
</p>
</div>
<div>
<p>
This text only is visible.
</p>
</div>
<div class="tobehidden">
<h4>
This text was also visible, but has now been made hidden.
</h4>
</div>
</div>
</div>
jQuery:
$(document).ready(function(e) {
//Change to first page at load
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#first");
/*
* Read more about page handling here:
* http://api.jquerymobile.com/pagecontainer/#method-change
*/
//Click event for the "NEXT" button
$( document ).on("click", "#Goto_page2", function(){
//Hide elements that has the class "tobehidden"
$(".tobehidden").hide();
//Switch to page 2
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#second");
});
});
I have been working with foundation 5, the reveal modal does not trigger and I'm totally at a loss.
Here's the modal code
<td>
Delete
<div id="modal" class="reveal-modal medium" data-reveal>
<p></p>
<p>Please confirm</p>
<a class="button radius">Confirm</a>
<a class="close-reveal-modal">x</a>
</div>
</td>
And the order of the scripts is in the right order just before closing the body tag.
<script src="/js/vendor/modernizr.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
I have tried to wrap the $(document).foundation(); in $(document).ready(function(){, but nothing is happening. The alert boxes work just fine, so I'm baffled by the problem with reveal modals.
Any help would be appreciated. Thanks.
The reason this happening, is perhaps because the modal should be the direct child of the "body" element. It should not be part of the "td" element.
I found the answer on this page:
http://foundation.zurb.com/forum/posts/20051-foundation-5-reveal-modal-doesnt-open