|
JavaScript - Modal Opacity Problem
Hi there.
I just started out learning javascript and jQuery.. and here's one of those bump that Im unable to pass through.. So here's the problem.. I tried writing a simple modal effect on the site I was working on.. since I'm fairly new to javascript and jQuery so please bear with me The problem that I am having is that the opacity of the #dialog (the white part in the middle ) is being inherited from the #mask.. the black part that covers the page.. I tried setting the opacity to #dialog{opacity:1;} but to no avail it's not working.. I'm trying to change the opacity cause the opacity is affecting the readability of the content.. Here's the simple code that I wrote.. can you please check them up? Its been only two days since I started reading about Javascript and jQuery so please have some mercy you can check up the page here.. http://dev.crownshipping.com.ph/single_update.html just click on the boats.. and the modal thingy will pop up.. hope someone can help and enlighten me.. I'mma fast learner.. if you can give resource links.. except w3schools.. I already read the whole thing Thanks Andrew here's the html code.. Code: <div id="mask">
<div id="dialog" class="window">
<!-- close button is defined as close class -->
<a href="#" class="close">Close X</a>
<h1>Vessel Name - KiKi C</h1>
<img src="images/single_update.jpg" alt="xxx"/>
</div><!--dialog-->
</div><!--mask-->
here's the javascript code.. Code: <script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
//select all the a tag with name equal to modal
$("a.modal").click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(document).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$('#dialog').css('top', winH/2-$(id).height()/2);
$('#dialog').css('left', winW/2-$(id).width()/2);
//transition effect
$('#dialog').fadeIn(2000);
$('#dialog').fadeTo("slow",1);
});
//if close button is clicked
$('.close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').fadeOut(1000);
});
});
</script>
Similar TutorialsHi Guys, Been stuck on this for too long now. I'm trying to write a function that rotates images with a fade. The function work properly, however I can't make the images fade back in. The fadein function won't add to the .style.opacity Here's the code with the php Code: function fadeout()
{
b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity - 0.01);
if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 0.1)
{
clearInterval(fadeouttimer);
b<?php echo ($AF_list_artist_id->artist_id); ?>.src = a<?php echo ($AF_list_artist_id->artist_id); ?>[starter<?php echo ($AF_list_artist_id->artist_id); ?>];
function fadein()
{
b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity + 0.01);
//alert(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity);
if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 1)
{
clearInterval(fadeintimer);
setTimeout("rotate<?php echo ($AF_list_artist_id->artist_id); ?>("+(starter<?php echo ($AF_list_artist_id->artist_id); ?>+1)+")",6000);
}
}
var fadeintimer = setInterval(fadein,10);
}
}
var fadeouttimer = setInterval(fadeout,10);
and without Code: function fadeout()
{
b7.style.opacity = (b7.style.opacity - 0.01);
if(b7.style.opacity == 0.1)
{
clearInterval(fadeouttimer);
b7.src = a7[starter7];
function fadein()
{
b7.style.opacity = (b7.style.opacity + 0.01);
//alert(b7.style.opacity);
if(b7.style.opacity == 1)
{
clearInterval(fadeintimer);
setTimeout("rotate7("+(starter7+1)+")",6000);
}
}
var fadeintimer = setInterval(fadein,10);
}
}
var fadeouttimer = setInterval(fadeout,10);
i have some really annoying issues with a widget which is known inline modal you can see that widget after you click the play button in the given link below, please help me out, the issue is that use google chrome and then go to this place, the link is: http://www.bloghuts.com/2010/09/star-island.html and in this page click on play, then you yourself will see the error, please tell me what to do with this error. And another problem is that again open the above link in internet explorer and click the play button you will see a different kind of annoying problem, except these two explorers it works fine, PLEASE HELP ME I WOULD REALLY BE THANKFUL TO YOU. Hi all! I am struggling with getting a modal window to launch. The two problems I experience are as follows: 1) Images do not display in IE within the hidden <div> tags. (This I tested on another page less complicated. Click the "donate" button on this page using IE and firefox to see what I mean... http://www.clanreportdb.co.uk/report...ls.php?id=1473) 2) When integrating the <a> tag link to launch within PHP code, it fails to work. Here is my code, and hopefully someone will know what I am doing wrong: Code: <html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/report/images/close.gif" border="0" class="btn_close" title="Close Window" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<style type="text/css">
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: <? echo $highlightbg; ?>;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
</head>
</html>
<?php
foreach ($d as $f)
{
echo "{$f[1]}<a href=\"#?w=500\" rel=\"popup_name\" class=\"poplight\"><img src=\"/report/images/tick.gif\" border=\"0\"></a>";
?>
<html>
<div id="popup_name" class="popup_block">
//CONTENT HERE eg. <? echo $f[2]; ?>
//Image does not display in IE but does in firefox
<img src="/report/yes.gif">
</div>
</html>
<?
}
?>
Hi, I've been searching for a good tut on modal boxs for a while where they open in middle of screen like facebook boxs & i want to have one where you use onClick function from href link. example: <a href="#" onclick="'files/delete.php?postId=$post['id']','modal_box'">Delete</a> and so on with other things. Can anyone help. Thanks. Hey, ive been strugglng all day to centre a DIV with javascript in the centre of my page. Ive created a modal popup and id like it to stay in the screen even if the page has been scrolled down. And no matter what i try i cant get it to actually hit the centre of the screen. I should add that im totally new to javascript but decided i cant avoid learning javascript forever so here are my pathetic efforts.. Code: function ShowPopup(hoveritem, thepopup, theimage)
{
popVar = document.getElementById(thepopup);
//document.getElementById('hoverpopup').style.paddingLeft = screen.width/2-250;
//document.getElementById("hoverpopup").style.paddingTop = screen.height/2;
// Set position of hover-over popup
//popVar.style.top = hoveritem.offsetTop + 50;
//popVar.style.left = hoveritem.offsetLeft + 100;
// Set popup to visible
popVar.style.visibility = "Visible";
}
Ive tried loads of other things too, whats commented out has been my last effort. Im doing other things too in the function in case you wondered. But any ideas how i can do this, sorry if ive not been too clear! I want to disable modal box when the page it is attached to is being viewed on a mobile device. I have tried what I know and have crashed and burned. Help will be greatly appreciated. This is the code that I have use... Code: <script src="/o/4055/images/jquery.avgrund.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function() {
$(".hidden").avgrund({
width: 500, // max is 640px
height: 340, // max is 350px
showClose: true, // switch to 'true' for enabling close button
showCloseText: 'close', // type your text for close button
closeByEscape: false, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
enableStackAnimation: false, // another animation type
onBlurContainer: 'div#container', // enables blur filter for specified block
template: '<div style="margin: 0 auto; padding:0; width:500px; height:350px;">' +
'<a href="https://afl.salsalabs.com/o/4055/p/salsa/donation/common/public/?donate_page_KEY=7606" style="border:none;" target="_blank"><img src="http://i1298.photobucket.com/albums/ag60/ProdSolutions/Lightbox_1_zpscead0a26.jpg" width="500px" height="350px" /></a>' +
'</div>',
onUnload: function() {
var date = new Date();
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
$.cookie("ARA_October_2014","true",{path:"/",expires:date});
}
});
$(".hidden").trigger('click');
});
$("#submitContribution").attr('value', 'Donate Now');
$("label[for=cc_number]").after($('div#useCC fieldset#credit_card_information div.formRow div.helpText'));
$("#credit_card_information > div:nth-child(6) > label:nth-child(1) > a:nth-child(1)").before($('#CVV2'));
$('#personal_information > legend:nth-child(1)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Your Information', 'Your Billing Information'));
});
$('div.formRow:nth-child(19) > label:nth-child(1)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Phone', 'Your Phone'));
});
$('#credit_card_information legend').each(function() {
var text = $(this).text();
$(this).text(text.replace('Credit Card Information', 'Payment Information'));
});
$('#credit_card_information > div:nth-child(3) > label:nth-child(1)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Card Number', 'Credit Card Number'));
});
$('#submit > p:nth-child(2)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Please click the submit button only once.', 'Please click this button only once.'));
});
$('.readMore').click(function(){
$('.readMore').hide('slow');
$('.text2').show('slow');
});
</script>
I am working on my homework. On my page, I need to make a modal window, which is just a picture has x or close letter, shows up whenever people open the page. So far, I called a picture with onload in a body and centered the picture. I don't know if there is anyway that I can just put x or close somewhere so that whenever people click x or close, the picture is not going to be visible ( promoPic.style.visibility = "hidden" this is my code for the picture. And I though I can just put input button or any letters inside of picture because its wrapped by paragraph, but, I can't. I guess I am miss understanding some concept? Code: <body onload="promoCenter()"><p><img src="http://codingforums.com/images/hauntedHouse.jpg" id="promoPic" alt="Haunted House" height="400" width="400" /></p> Hi, I am working on a project in which I have to open my flash demo in a modal window. I got all the code for modal window and it is working great. The only problem is I am not able to open a flash file in modal window. Can any one guide me or suggest me how should I fix this. Thanks in advance. Vikrant Hi. I have a page in a modal window that fades in over the top of my site when clicked. When this page comes up in Google and is clicked it does not load up the site with the modal window over top, it just loads the content of the modal window on a full page. Is there a way to have the link on Google go to the page with the modal window over top? The modal window is "PrettyPhoto" using JQuery. Thanks in advance. Hi, I have a JQuery modal window and I am trying to pass the value of its input field to a hidden input field within a form but I can not seem to get the value when it is in the modal window. Modal Window Code: Code: <div id="modal-content" class="clearfix"> <h2> enter a name</h2> <div> <input id="enteredName" name="enteredName" type="text" value="" /> <a href="javascript:submitform(true)" name="save" id="save" class="btn"><span>Save</span></a> </div> <a href="javascript:submitform(false)" id="close" class="close-link">No thanks just carry on</a> </div> Javascript to set the value of the hidden field to equal the value of the modal input field Code: <script type="text/javascript">
function submitform(assignName) {
if (assignName) {
var hiddenfield = document.getElementById("hiddenfieldid");
hiddenfield.value = document.getElementById("enteredName").value;
}
var form = document.getElementById("formTest");
form.submit();
}
</script>
Any help would be much appreciated. Hi, I am writing an application which needs to open a modal dialog window in a secure connection. I am able to open the dialog using HTTPS, but on the status bar I cannot see the SSL Padlock. The application is being written in .NET and the browser I use is IE 6.0. Any suggestions and feedback are welcome. Regards Totre Hi, well i used soh tanaka inline modal window which is a popup window like lightbox. But it failed to work with IE9 RELEASED CANDIDATE VERSION. Can anyone tell me that why is it having issue with a better version of explorer. I have made a video to show the error, as to make it more easy to explain what i am saying. here is the link to it http://www.youtube.com/watch?v=pHi9ZlGyWc0 i would look forward to the replies. thank you. On my main page, I have a list of item ID's which are assigned variables, the list is concatenated and so the variables are always different. So another thing that gets concatenated is a link, which uses javascript/jquery to open a popout modal window which is another php file called sharepost.php. I want to be able to transfer the php variables from the main page to append them on the end of the sharepost.php URL so I can use $_GET to grab them for use. Here's what I have... not working, but I figured I'd give it a try. Code: <?php
//use mysql to loop through some variables
$post_id = $setvalue;
$member_id = $anothersetvalue;
$list .= '
<div>
' . $post_id . '
</div>
<div>
' . $member_id . '
</div>
<div>
<a href="#" class="button" onClick="openup(); return false">Share This Post</a>
</div>
$the_link = " http://sharepost.php?post_id=' . $post_id . '&member_id=' . $member_id . ' ";
';
?>
<HTML>
<head>
<script>
// Displays an external page using an iframe
function openup(){
var src = "<?php echo $the_link;?>";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
closeHTML:"",
containerCss:{
height:150,
padding:0,
width:350
},
overlayClose:true,
});
}
</script>
</head>
<body>
<?php echo $list;?>
</body>
</HTML>
I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax. I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope. I also tried writing separate plugin for my need but i don't have clear idea how does it work. So please either suggest a way or give me link to article which is simple to understand and can clear how it work. Hey there everyone I'm a bit new to javascript and having a bit of a problem. I have a page users can click to upload a photo. When users click I want a modal window to pop up with a simple file upload input inside it and a submit button. I have this working except that when users click submit nothing happens. I'm using nyroModal http://nyromodal.nyrodev.com/#demos and the code I use is: Code: <a href="#test" class="nyroModal"><img src="/img/uploadimage.gif" alt="" /></a> <div id="test" style="display: none; width: 600px;"> <form id="ImageUploadForm" enctype="multipart/form-data" method="post" action="images/upload" accept-charset="utf-8"> <div style="display:none;"> <input type="hidden" name="_method" value="POST" /> </div> <div class="input file"> <label for="ImageFileName">File Name</label> <input type="file" name="data[Image][fileName]" id="ImageFileName" /> </div> <div class="submit"><input type="submit" value="Upload" /> </div> </form> </div> If I take the code out of the div=id"test" the form appears on the normal page and submits just fine. Inside the test div tho the modal window pops up with the form inside but the submit button does nothing. Can anyone enlighten me what I'm doing wrong? Hello. I know I get set opacity for IE using the CSS Code: filter:alpha(opacity=50); and I set it with JS as Code: theObj.style.filter = "alpha(opacity=" + (opac * 100) + ")"; but how can I read it's initial value (and store it in a variable)? Andy. Added: I should mention I use this function to get the current style: Code: var GetStyle = function (el, strRule) { // e.g. "font-size" - robertnyman.com
var elem = (typeof el === 'string') ? document.getElementById(el) : el;
if (document.defaultView && document.defaultView.getComputedStyle ) {
return document.defaultView.getComputedStyle(elem, '').getPropertyValue(strRule);
}
else if ( elem.currentStyle ) {
strRule = strRule.replace(/\-(\w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
return elem.currentStyle[strRule];
}
else
return '';
}
; Ok so I have two images class1 & class2 which both have opacity:0.3; and filter:alpha(opacity=30); added with css. I am trying to get it so when I click on class1 it will either fade in (ideally) or display as 100% opacity. I do not want both class's to be able to be 100% so if one is clicked the other would be 30%. I also have multiple instances of class1 and class2. If anyone can help me I will praise you on the highest mountain! Thanks, B Hey, I have a script that needs to see the current opacity value of divs but I can not find the code to make it work in IE. I've googled it for over an hour with no answer. Any suggestions? For non-IE browsers, here is the code I am using Code: div_opac = document.getElementById(some_div).style.opacity; Thanks for the help! Hey all, I found this code but don't fully understand it. Can anyone take a brief moment to explain what is occuring in the clearMenu, setOpacity and fadeMenu functions: Code: // configuration variables
var timeout = 250; // milliseconds
var fadeSpeed = 500; // milliseconds
var useFade = true;
// timers array
var timers = new Array();
// state array -- by id, value = active, false = inactive
var state = new Array();
// lastOpacity: used to prevent multiple timers from making the fade flicker
var lastOpacity = new Array();
// MSIE has its own way of setting opacity, so we have to detect it
// all the other major browsers support the standard DOM opacity property
var msie = false;
if( navigator.appName == "Microsoft Internet Explorer" ) msie = true;
// entry point: set element to visible and clear its timers
function setMenu( id )
{
var e = document.getElementById(id); //When the user rolls over one of horizontal menu items, the setMenu method is called and we pass in as an argument, the id of the associated ul element, which we then set its visibility attribute to visible.
e.style.visibility = "visible";
state[id] = true;
setOpacity( id, 1 );
if(timers[id]) {
clearTimeout(timers[id]);
timers[id] = undefined;
}
}
// set element to hidden and reset its opacity
// typically called by a timer
// may be used as an entry point to bypass timers and fades
function hideMenu( id )
{
var e = document.getElementById(id);
state[id] = false;
e.style.visibility = "hidden";
if(useFade) setOpacity( id, 1 );
}
// entry point: hide the menu using fade (if enabled)
function clearMenu( id )
{
if(useFade) timers[id] = setTimeout( 'fadeMenu( "' + id + '" )', timeout );
else timers[id] = setTimeout( 'hideMenu( "' + id + '" )', timeout );
}
// set the opacity
// special support for MSIE
function setOpacity( id, value )
{
var e = document.getElementById(id);
if(state[id]) value = 1; // menu fade was interrupted
else if(lastOpacity[id] && (lastOpacity[id] < value)) value = lastOpacity[id]; // prevents flicker if multiple timers set
if(msie) e.style.filter = 'alpha(opacity=' + value * 100 + ')'; // MS Internet Explorer
else e.style.opacity = (value); // Everyone else (standard DOM)
if( value == 0 ) hideMenu( id ); // when all faded, reset the menu state
lastOpacity[id] = value;
}
// fade a menu
// typically called by a timer
function fadeMenu ( id )
{
var start = 0;
var end = 0;
var s = Math.round( fadeSpeed / 25 ); // fade in 25ms increments
var timer = 0;
var i;
state[id] = false;
for( i = s; i >= 0 ; i-- ) {
setTimeout( "setOpacity('" + id + "'," + ( i / s ) + ")", timer++ * fadeSpeed / s )
}
}
Thanks for any response. Hello! I'm just starting to learn JavaScript, so don't take me too serious. I would like to set opacity of some element to 0 through JavaScript, using GetElementById function. This is my short code inside body of HTML: Code: <script>
document.getElementById("element").style.opacity="0";
</script>
<div id="element">
noopacity
</div>
It doesn't seem to work, what am I doing wrong? Thanks. |
|||||||