|
JavaScript - Creating Modal Block, Overlay Effects With Jquery
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. Similar TutorialsHi, 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 guys I am using a customized version of this free css dropdown menu script. It is just pure css, no jquery. I wanted to add some delay to the open and close on mouseover, here is what I added: Code: <script type="text/javascript">
$(document).ready(function () {
$('ul.dropdown li').hover(
function () {
//show its submenu
$('ul', this).slideDown(150);
},
function () {
//hide its submenu
$('ul', this).slideUp(250);
}
);
});
</script>
When I first mouse over, this does nothing, but if I mouse over the same drop down li a second time, it works. Check it out here. Any ideas on how I can fix this? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
background-color: #ccffcc;
display: none;
margin-left: -400px;
position: absolute;
top: -250px;
left: 50%;
width: 800px;
height: 500px;
visibility: visible
}
#container{
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block
}
</style>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}
function show() {
document.getElementById("overlay").style.display = "block";
swfobject.embedSWF("helpdeskApp_three.swf", "flashcontent", "800", "500", "9.0.0", "expressInstall.swf");
}
//]]>
</script>
</head>
<body>
<div id="container"> <div id="overlay"><div id="flashcontent">fdgfdg</div>
<a href="#" onclick="hide();">Click me</a> to close.</div></div>
<div><a href="#" onclick="show();">Click me</a> to show the hidden content.</div>
</body>
</html>
I got some of this code from these forums. Thank you. It works great, however I'll be using this code with a school's website's template. The problem is that the "overlay" div tags would be placed within the container div tags of the template,therefore confining to these dimensions. How can I modify my code to have my div tags not affected by the templates div tags... and have the overlay be center in the browser.. Thanks Hi, My JQuery click submission button on a form works fine. However I have several forms each with several buttons on one page and want to create a JQuery template/placeholder code to deal with all requests. Firstly is this possible? Secondly I had a go myself. I tried several alternatives none of which worked, below is my cleanest attempt. Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (Button,Form,File){
$('#placeholder').click(function(Button,Form,File){
$('Button').click(function(){
var data = $('Form').serialize();
$.post ('File',data, function(){
alert("Thank you for your submission");
$('Form').each (function(){
this.reset();
});
return false;
});
});
});
});
</script>
</head>
<body>
<form action="" name="submissions" id="submissions">
<input type="text" name="person" id="person">
<br />
<br />
<input type="text" name="item" id="item">
<br />
<br />
<input type="button" name="placeholder('send','submissions','insertsubmissions.php')" id="placeholder('send','submissions','insertsubmissions.php')" >
</form>
I realise in this version I have removed the #, I did try other alternatives with the # in which didn't work, but I realise that might just mean I didn't try the right one. Hi everyone I need some help creating a function which does the same thing for the chosen elements. I have #design1 #design1servicetext and #design1servicebutton. Code: //Service hover//
$('#design1').mouseenter(function (){
$('#design1servicetext').css('background-position', '0 -91px')
$('#design1servicebutton').css('background-position', '0 -33px')
})
.mouseleave(function (){
$('#design1servicetext').css('background-position', '0 0px')
$('#design1servicebutton').css('background-position', '0 0px')});
//Service hover end//
How can I create a function, in which I have to choose 3 divs to do the animation? A function like Code: animatebg('#design1','#design1servicetext','#design1servicebutton');
Can someone please help me? I've tried so many function tutorials but none of them worked for what I wanted to do. Thank you a lot in advance! I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right thanks 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>
<?
}
?>
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, 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. 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 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>
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>
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, 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. 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 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>
plz i want to know how to make the effects that exists on this link in the upper part : http://www.masrawy.com/new/ 1-) changing color when pressing on the color 2-) changing font (+) to increase it (-) to decrease it (N) to set it to the normal style 3-) decrease and increase the width of the page (from كبر حجم الصفحة or صغر حجم الصفحة ) can anyone help me in doing this task????? 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? |
|||||||