I am about to start a work on a alert box or Modal, that will Pop-up when the sites loads and after 10 seconds it disappear.
I am looking for a html/css solution, if possible.
Can any body lend me an idea on how to achieve it?
Here's a working example based on what you need as a modal popup.
<html>
<head>
<title>Model popup box</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#modal').delay(10000).fadeOut();
});
</script>
</head>
<body>
<div id=modal > Hello, i am a modal popup </div>
</body>
</html>
Related
While trying to create a modal using Foundation Reveal, I found that I couldn't close it. Not by using the reveal-modal-close class, not by javascript, nothing was working.
I tried to put this example from the documentation into the page:
<div id="myModal" class="reveal-modal" data-reveal>
<h2>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">×</a>
</div>
When the page loads, it's open, but I can't get it to close. Also, not sure why it loads open.
At the bottom of my <body>, I have this:
<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.6.2.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation.min.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.reveal.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<script type="text/js" src="js/modal.js"></script>
<script>
$(document).foundation();
</script>
you don't need to load both foundation.min and foundation.reveal, just load min unless you need only reveal. Also you don't need modal.js - might be a conflict there.
See documentation here and follow it, should work once you fix the above issues: http://foundation.zurb.com/docs/components/reveal.html
When i click on a link this will redirect me to another page in my app.
But after that when i am clicking on the mobile's back button it is not redirect me to previous page.
Ca anyone have answer of this question.
Actually device's back button click is also an event in PhoneGap. You can define the beckbutton event as a function.
<html>
<head>
<title>Sample</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", backButtonClick, false);
}
function backButtonClick() {
//Do something here on backbutton click or go back to last page.
window.history.back()
}
</script>
</head>
<body>
</body>
</html>
Its a sample, now tweak your page as you wanted.
Always write the backbutton event on deviceready!
I would like to create a for to post some data which is a date to be chosen and there will be 2 buttons.
1 button needs to post the data on the same page and another button needs to post the data on a different page.
What I don't understand is how I can specify that in the 2 buttons as they are in the same form.
Thanks for your help,
John.
Do something like this with jQuery
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#first").click(function(){
$("#for").attr("action","ad.html");
$("#for").submit();
});
$("#second").click(function(){
$("#for").attr("action","test.html");
$("#for").submit();
});
});
</script>
<body>
<form id="for">
input : <input type="text">
</form>
<button id="first">Subit First</button><button id="second">Submit Second</button>
</body>
All the best
I am attempting to use a document ready function I found on your site to force a fancybox lightbox to appear when a page loads. Here is the code I am using, (I found it here on your site). It does force the fancybox to appear on page load, but it forces it to open in a new page and it loses it's modal properties when I add in the $document ready function.
I'm not terribly technical, but after hours of researching and trying several methods, I'm giving and seeking help. Any support would be greatly appreciated.
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
<link media="all" rel="stylesheet" type="text/css" href="css/fancybox.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.sameheight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
</head>
<body>
<div id="wrapper">
<a name="hidden_link" id="hidden_link" a class="lightbox" href="#popup01"></a>
</div>
<div class="popup-holder">
<div id="popup01" class="lb">
Your code is correct but you may missed to include css or js files for fancybox.
I m new to MVC. I need to refresh tab panel after 10 seconds in MVC.
Can anybody help me in that?
Thanks
you can do that using JQuery or ajax the following is a sample example using Jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var refreshId = setInterval(function()
{
$('#responsecontainer').fadeOut("slow").load('your target page will be here').fadeIn("slow");
}, 100);
</script>
</head>
<body>
<div id="responsecontainer">
here you can place your Div,html or ASP.net control
</div>
</body>
</head>
</html>
The div or whatever you use for content should have an id and should be rendered as an action that returns a partial view. Then you can use JavaScript to set the timer, and jquery Ajax call to replace the content with what is returned by calling the URL you get by URL.Action.