I have a CSS modal on my page that is automatically hidden by JS until a Sign Up link is clicked. My problem is that when the page loads, the modal briefly flashes before being hidden.
I have used JS Hide function on the modal but am unsure of how to prevent the flash on page load, without disabling the ability for it to show on sign up click.
Modal HTML:
<div id="openModal" class="modalDialog">
<div>
X
<header><h2>Header</h2></header>
<form><p>Form Contents</p></form>
</div>
</div>
Hide (and reveal on click) JS:
<script>
$(document).ready(function(){
// Hide Modal by default
$('#openModal').hide();
// Show Modal on click of Signup
$('#signup').click(function(){
$('#openModal').fadeIn(500);
});
// Hide Modal on click of Close
$('#close').click(function(){
$('#openModal').hide();
});
});
</script>
Your help is greatly appreciated.
D
Simple solution would be adding display: none to your .modalDialog class. Then you won't have to hide it by default ($('#openModal').hide(); line will not be necessary) and jQuery's .show() will override css.
Style atribute:
<div id="openModal" class="modalDialog" style="display: none;">
<div>
X
<header><h2>Header</h2></header>
<form><p>Form Contents</p></form>
</div>
</div>
or:
var $ = typeof (jQuery) === 'function' ? jQuery : typeof ($) === 'function' ? $ : false;
if ($ && $('#openModal').length) $('#openModal').hide();
$(document).ready(function(){
//...
});
Use css display:none to hide the modal.
The problem is from this part of your code
$(document).ready(function(){
$('#openModal').hide();
});
This is waiting that all the html has loaded before firing your code, so hiding your modal.
JQuery hide function is adding an inline style to your element display:none so you could add this inline style yourself on the dom element to avoid this flash
<div id="openModal" class="modalDialog" style="display:none">
<div>
X
<header><h2>Header</h2></header>
<form><p>Form Contents</p></form>
</div>
</div>
Related
Hello I have a sign up form which is visible and I am trying to hide it when the page loads. So what I did was to put the whole form in a div class named "signup" and then hide it with a script code.
UPDATE:
html
<script>
document.write('<div class="js">');
</script>
<span class="button">Sign In</span>
<div id="signup">
<div class="modal-bg">
<div id="modal">
<span>Sign In×</span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
<script>
document.write('</div>');
</script>
My JS code (without hide function):
$('.button').click(function(){
$('#modal').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close,.modal-bg').click(function(){
$('.modal-bg').fadeOut();
$('#modal').fadeOut();
return false;
});
Even though the hide/appear seems to work the form goes hidden if I click on it. This is a problem as no one can sign up if they can't type/click on the form.
(ISSUE FIXED)
here is the codepen (live version): http://codepen.io/mariomez/pen/WbgrNK
You don't need the signup div at all - I think it complicates things. Just start your modal background hidden so before your button click code add this:
$('.modal-bg').css('display','none');
Example
Update
to stop your form showing up whilst your page loads I would add a js div:
after your body opening tag:
<script>
document.write('<div class="js">');
</script>
before your body closing tag:
<script>
document.write('</div>');
</script>
This allows you to apply js only style, in this case for the modal-bg:
.js .modal-bg {display:none;}
and then you can remove the above js to hide the modal as it will be now in your css
updated codepen
You hide the "signup" Div but try to restore the "modal" div
This works:
$('.button').click(function(){
$('#signup').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close').click(function(){
$('.modal-bg').fadeOut();
$('#signup').toggle();
return false;
});
You are looking for a div with the id "signup", but that is the class name.
$(function() {
$(".signup").hide();
});
Will hide the signup div when the page loads.
You could then use $(".signup").toggle(); on the button click event.
If you combine these, e.g.
$(function() {
$(".signup").hide();
$(".button").click(function() {
$(".signup").toggle();
});
});
Then the button displays the signup block correctly, and it is hidden on page load.
Here is the jQuery to change the CSS on page load:
$('.signup').css({
'display': 'none'
});
First method (CSS) - CodePen
#signup {
display: none;
}
Second method (jQuery) - CodePen
$('#signup').hide();
Looks like you already figured it out in your codepen paste? That code is different from your post...
Anyway, you have 3 layers of divs in your Login dialog:
#signup > modal-bg > modal
So if you want to hide #signup after loading the page:
$(function() {
$("#signup").hide();
});
then you also need to show/hide #signup in your button events.
.modal-bg and #modal are child elements of #signup, so if you remain #signup in hidden, .modal-bg and #modal will always be hidden no matter what you do on them.
By the way, I suggest you to use FireBug or general developer tools (hit F12 in chrome/IE/FIrefox) to inspect HTML elements and check what goes wrong, at least that's how I found the problem in your code.
I'm loading a dialog from another page using load. I'm trying to load it inside a DIV. Now i need only the dialog box area to be added inside my div , not the entire blank space that are present in the page from which i load the dialog. how can it be done ?
$(document).ready(function(e) {
$('#content').load('dialog.html');
});
HTML
<div id="content">
</div>
Dialog.html
$(document).ready(function(e) {
$('#wrapper').dialog({
appendTo:'#content'
});
});
<body>
<div id="wrapper">
</div>
</body>
i tried load('dialog.html div') , but still the blank space also gets added !
You may try this:
$(document).ready(function(e) {
// initialize dialog
var dialog1 = $("#content").dialog({
autoOpen: false
});
// load content and open dialog
dialog1.load('dialog.html #wrapper').dialog('open');
});
if u just want to load the "wrapper div" then use this $("#content").load("dialog.html #wrapper");
i have a div in my project and on this div a button that has an action of sliding the div down but the div itself has an action onclick to slide itself up
the problem here is that when i click the button the action of the button is done that the div slide down but also the action of the div is fired and slide up again coz the button is a part of it
i hope that i give you the point
here is some code
<div id='container' onclick='slideup()'>
<button onclick='slidedown()'>click</button>
</div>
which slideup and slidedown are functions added by my in javascript
Add return false to function slidedown
<div id='container' onclick='slideup()'>
<button onclick='slidedown()'>click</button>
</div>
function slidedown(){
...
...
return false;
}
since you tagged your question jQuery, why don't you use this wonderful library?
$('#container button').click(function(){ // or use $('#button-id')...
slidedown();
return false;
});
$('#container button').click(slideup);
Updated HTML
<div id='container'>
<button >click</button> <!-- better give that button an id-->
</div>
I am making a div which should be hidden when the page loads, then visible once the user clicks a link. The code below works in FF / IE7 / IE8 but not in IE9, where the div is visible at all times ( without content ). Thanks in advance!
<script>
$(document).ready(function() {
$('#translateBoxen').hide();
$('#translateToggle').click(function() {
$('#translateBoxen').toggle(400);
return false;
});
});
</script> // This is the jQuery code to hide and toggle the div //
<div style="width:200px;height:100px;position:absolute;"> // Just a holder that's needed for the site
<a class="vitxtext" style="font-size:10px;" id="translateToggle" href="#">
Translate
</a>
<div style="clear:both;"></div>
<div id="translateBoxen">
// BOX CONTENT //
</div>
</div>
Why don't you hide the <div> with CSS? Just set to to display:none in your CSS, then when the toggle link is clicked for the first time it should be shown.
There is no reason why toggle() should not work in IE9, are you getting any script errors?
Late to the party, but try making a .hidden class with display:none, then hiding/showing by putting addClass('hidden') and removeClass('hidden') instead of show/hide.
I want to use fancybox to popup a message if a certain button is clicked.
I want the fancybox message to only contain some text,
and a 'close' button, i dont mind using the default button if there is one.
can someone give an example of how it should be written in the html page and the js page?
any help will be much appreciated!
Assuming your button has an id of yourButton:
$("#yourButton").click(function () {
var content = $("<div>Hello<br /><br /></div>");
var button = $("<input type='button' value='Close Me!' />");
content.append(button);
$.fancybox({ content: content });
$(button).click(function () { $.fancybox.close(); });
});
This should be able to help you:
http://fancybox.net/howto
Once you have required all the relevant files, to hook it up to all linka, use this:
$("a").fancybox();
If the html is complicated enough you might prefer putting it in a hidden div as I've done below. This is a scaled down version of code I'm running on my site to do a fancybox dialog box. Works with FancyBox version 1.3.4 (I haven't upgrade to 2 yet). Personally, I like the default close button (circle X in top right corner) and even pressing Escape works, but I've added a custom close button to the popup. It includes javascript to close FancyBox.
<a id="mylink" href="#mypopup">link style button</a>
<div id="mybutton">button</div>
<div style="display:none">
<div id="mypopup">
<h1>My Title</h1>
<p>My Message</p>
<!--... other complex html can go here ...-->
<input type="button" onclick="$.fancybox.close();" value="Custom Close Button" />
</div>
</div>
<script type="text/javascript">
$('#mylink').fancybox();
$('#mybutton').click(function() {
$.fancybox({
'orig' : $(this),
'href' : '#mypopup'
})
});
</script>