I have written a CSS/HTML code which is supposed to show the images of three cars and when you click on an image, a text box appears and you can write comments about the car into the text box and click on the submit button. I have checked and rechecked my codes and everything seems to be in order. I have saved the codes in the htdocs folder of XAMPP. Now, no PHP is involved in my codes, so I don't need a server to execute the file, but as far as I know, this should not matter. So, I type "localhost/index1.php" into the address bar and press return. What I get, surprisingly, is just the images of the three cars, but no submit button. And when I place my pointer on each car, the individual car image gets bigger (as expected) BUT a textbox does NOT appear. This should not be happening. So I decided to rename my file index1.html and saved it in the htdocs folder as before but STILL the situation persists. Please could someone tell me why I am not getting the textbox to appear when I click on the icon, and why no submit button appears either?
I HAVE NOW ADDED JavaScript to my code, and it's STILL not working!!!
<!DOCTYPE html> <html> <head> <style> body {
background-color: #ADD8E6;
}
#form {
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.car {
float: left;
margin: 2% 2% 5% 2%;
}
.car label img {
transform: scale(0.8);
transition-duration: 0.2s;
}
.car label img:hover {
cursor: pointer;
transform: scale(1);
}
.comment {
position: absolute;
visibility: hidden;
}
.comment input {
width: 128px;
font-size: 1em;
}
.car label img {
width: 128px;
display: block;
}
#button {
position: relative;
left: 66%;
margin: 2%;
visibility: hidden;
}
</style> </head>
<div id="form">
<form method="post" action="#">
<div class="car">
<label for="mercedesbenz">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="mercedesbenz" placeholder="Merc" />
</div>
</div>
<div class="car">
<label for="porche">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="Porche" placeholder="Porc" />
</div>
</div>
<div class="car">
<label for="bmw">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="bmw" placeholder="Beemer" />
</div>
</div>
<input id="button" type="submit" name="submit" value="Submit">
</form>
</div>
<script>
$('.car').click(function() {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");
var id = $(this).children('label').attr('for');
var buttonOffset;
switch(id) {
case 'mercedesbenz':
buttonOffset = '0';
break;
case 'porche':
buttonOffset = '33%';
break;
case 'bmw':
buttonOffset = '66%';
break;
}
$(this).children('.comment').css("visibility", "visible");
$('#button').css("left", buttonOffset);
$('#button').css("visibility", "visible");
});
$('.comment').mouseleave(function() {
setTimeout(function () {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");
}, 500);
});
</script>
</body>
</html>
I think that what you need is JavaScript to handle the click events:
When you click on an image: show the submit button and the comment box.
When you click on the submit button: hide the button and the comment box.
Note: I changed your button from type submit to button so you can see the effect. You should put it back as submit on your side.
// show comment box when clicking on image
$("img").on("click", function() {
$(".comment").css({visibility:"hidden"});
$(".comment." + $(this).parent().attr("for")).css({visibility:"visible"});
$("#button").css({visibility:"visible"});
});
// hide button and comment when submitting
$("#button").on("click", function() {
$(".comment").css({visibility:"hidden"});
$("#button").css({visibility:"hidden"});
});
body {
background-color: #ADD8E6;
}
#form {
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.car {
float: left;
margin: 2% 2% 5% 2%;
}
.car label img {
transform: scale(0.8);
transition-duration: 0.2s;
}
.car label img:hover {
cursor: pointer;
transform: scale(1);
}
.comment {
position: absolute;
visibility:hidden;
}
.comment input {
width: 128px;
font-size: 1em;
}
.car label img {
width: 128px;
display: block;
}
#button {
position: relative;
left: 66%;
margin: 2%;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="form">
<form method="post" action="#">
<div class="car">
<label for="mercedesbenz">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment mercedesbenz">
<input type="text" id="mercedesbenz" placeholder="Merc" />
</div>
</div>
<div class="car">
<label for="porche">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment porche">
<input type="text" id="porche" placeholder="Porc" />
</div>
</div>
<div class="car">
<label for="bmw">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment bmw">
<input type="text" id="bmw" placeholder="Beemer" />
</div>
</div>
<input id="button" type="button" name="submit" value="Submit">
</form>
</div>
.comment {
position: absolute;
}
You have comment boxes hidden
Change your submit button css to:
#button {
position: relative;
left: 66%;
margin: 2%;
}
Thus, here is the complete version:
http://jsfiddle.net/2khqdxtr/1/
Related
Is it possible to pass parameters in JQuery popup box??
there has two file
form.php <--The user will fill in the form like username.
when the form sumbit, it have a JQUERY pop up box to show his username that is the user fill in the form.
THX
My html code
<form method="get" onsubmit="return false;">
First name:<br>
<input name="firstname" type="text"><br>
<br>
<input type="submit" value="Submit" onclick="popupfunctioncall();">
</form>
<div class="popup-container">
<div class="popup-play"></div>
<div class="pop-popup white_content" id="light">
<div class="popup-close">
<span><font size="5">x</font></span>
</div><?php
echo $_GET["firstname"];
?>
</div>
<div class="black_overlay" id="fade"></div>
</div>
MY Css code
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);}
.white_content {
display: none;
position: absolute;
top: 0px;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: 500px;
width: 600px;
background-color: #ffffff;
z-index: 1002;
background-color: #fff;
z-index: 1002;
overflow: auto;
text-align: center;}
.popup-close {
position: absolute;
top: -2px;
right: 7px;}
My Javascript code
function popupfunctioncall(){
$('#light').fadeIn(600);
$('#fade').fadeIn(600);
}
$(document).on('click','.popup-close',function(){
$('#light').fadeOut(600);
$('#fade').fadeOut(600);
});
Please look below example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function popupfunctioncall(){
alert($('#username').val()+"/"+$('#color_name').val() );// you can user your popup here
}
</script>
</head>
<body>
<form>
<input type="text" name="username" id="username">
<input type="text" name="color" id="color_name">
<input type="submit" name="cub" value="submit"onclick="popupfunctioncall()">
</form>
</body>
</html>
First, you better to set an ID to the font tag inside the popup window like this.
<span><font id='content' size="5">x</font></span>
Then you can get the input value and set popup content as follow.
function popupfunctioncall(){
var firstname = $("input[name='firstname']").val();
$('#content').html(firstname);
$('#light').fadeIn(600);
$('#fade').fadeIn(600);
}
Hope this help.
I am trying to be able to click on a specific square and get a checkmark to appear over-top of it. I am going to want it to have a toggle effect, but I wanted to try to at least get the checkmark to show, which I am really having an issue getting it to even appear.
What am I doing wrong?
$('.package-img').click(function () {
//target.innerHTML = '<img src="images/checkmark-circle.png" class="checkmark-img total-center">';
$('.package-img').prepend('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 50%;
height: 50%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>
Use before method instead of prepend, otherwise your image is being added inside another image. Also use $(this).before... otherwise your checkmark will be added to all images with class package-img
$(this).before('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
var $img = $('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img"/>').hide();
$('.package-img').before($img);
$('.package-img').click(function () {
$(this).prev().show();
});
$('.checkmark-img').click(function () {
$(this).hide();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 50%;
height: 100%;
z-index: 1;
position: absolute;
left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>
It is understood what you are looking for. Basically you can "toggle" the checkmark image over the checkmark square image when you click on the checkmark square. The problem with this is once you put the checkmark over the square the toggle doesnt work anymore. I have come up with a solution that should work a little better.
Basically if we take advantage of the rules that when a label is selected that is bound to a <input type="checkbox" /> this will toggle the checked property of the checkbox.
We can then bind to this event in jQuery and show\hide the checkmark. In this instance we dont bind any click events to the images, but the change event of the checkbox. Something like the example below.
Now the question is:
Why did i use a checkbox
Well by using a checkbox we can capture the result in our form posts. It also makes it easy to identify what is checked by enumerating all the check boxes that have the checked property.
To have this sent to your server you will need to add a name property to each checkbox and also set the value property.
$('.calendar-check').on('change', function() {
if ($(this).prop('checked'))
$(this).parents('.calendar-wrap:first').find('.checkmark-img').show();
else
$(this).parents('.calendar-wrap:first').find('.checkmark-img').hide();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition: 1s;
-webkit-transition: 1s;
position: relative;
}
#calendar-wrap,
#tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
display: none;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.calendar-check {
display: none;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<label for="package-check-1" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 1" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-1" />
</div>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<label for="package-check-2" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 2" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-2" />
</div>
Sample JSFiddle
EDIT
For completness sakes I figured best to show a CSS (3) only solution. This has no depenedcies on using jQuery at all. Again this takes into consideration a checkbox (which is value based) and toggles the checkmark based on the toggle.
The Markup is quite simple.
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
Example:
.calendar-checkmark input[type=checkbox] {
display: none;
}
.calendar-checkmark label {
cursor:pointer;
display: block;
height: 384px;
width: 354px;
position:relative;
background: url('http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif') no-repeat center center transparent;
}
.calendar-checkmark label::after {
content:' ';
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index:1;
display:none;
background: url('https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png') no-repeat center center transparent;
}
.calendar-checkmark input[type=checkbox]:checked + label::after {
display: block;
}
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
The trick here is using Adjacent sibling selectors which allow you to select an adjacent sibling based of another element. So if we look at the css when the checkbox is checked it gets the Psudo-class :checked applied to it (similar to :hover etc). Then we use the adjacent + selector to locate the label.
Now the label element has a css background set to the image of the square box. Next it has the psudo-class ::after applied which creates our psudo-element that contains the checkbox. This is added after the element, when the checkbox is checked the psudo class :checked is addeed. This then changes the state of the psudo element by displaying the element.
Another Fiddle
This can be a lot simpler if we just remove the box images and create them via CSS. There will be less to download and we can then make the box's background transparent. This will allow us to just show and hide the checkmark that is already sitting behind each box.
$('.package-img').click(function () {
this.nextElementSibling.classList.toggle("hide");
});
parent { position:relative; }
.package-img {
border:3px solid black;
width: 110px;
height:110px;
background-color:rgba(0,0,0,0);
margin-left: 20%;
cursor: pointer;
position:relative;
display:inline-block;
}
.checkmark-img {
transition:1s;
width: 15%;
z-index: -1;
position:relative;
margin-left:-15%;
}
img.hide { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="product-titles">Package 1</h2>
<div class="parent">
<div class="package-img"></div>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>
<h2 class="product-titles">Package 2</h2>
<div class="parent">
<div class="package-img"></div>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>
1. absolutely position the Checkmark on top of the package image
2. Hide it
3. Use toggle to reveal it
since its hidden on top of it you will need to use the siblings selector to retrieve it
$('.checkmark-img').hide();
$('.package-img').click(function () {
$('.checkmark-img').toggle();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 25%;
margin-top:10%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: absolute;
width: 50%;
height: 50%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>
I'm having a hard time of thinking how am I going to save the values taken from the checkbox (came from "modalForm").
I have 2 forms here. My "mainform" and "modalForm".
This codes are similar to my program, I just replace the values.
My program works like this. I have a search bar before this, searching unique id and after searching it, their details will be loaded here.
If you click the textbox, a modal will pop up containing checkboxes. If one checkbox is checked, its label beside it will be the one to be shown on the textbox. When two or more checkbox were checked, a word "multiple" will be shown in the UI.
Value(s) will be inserted/updated to the database.
In my case here, instead of label, value is the one showing on the textbox.
Can you help me how can I store the array that i used into database and how can I fetch their values once it was loaded again.
My working fiddle: https://jsfiddle.net/8bf3vjuk/
I'm having a hard time here because here are two forms.
testing.php
<form method="post" name="mainform" action="">
<label>Sports</label>
<a href="#modal" id="done"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" id="test" name="test" placeholder="test" value="">
<input class="hb_button3" type="submit" id="modalbutton" value="save"> <!-- once submit value taken on the checkbox will be save to the system database -->
</a>
</form>
<form method="post" name="modalForm" id="modalForm" action="testing.php">
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Basketball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Baseball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Soccer </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Volleyball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="4">
<div class="clear"></div>
<label>DOTA :)</label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" id="submit" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
here is my styles.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
my javascript code
$(document).ready(function(){
$("#done").click(function(e) {
// alert('ok');
$("#modal").fadeIn();
// e.preventDefault();
});
$("#submit").click(function(e) {
var checked = [];
i=0;
temp=""
$("input[name='test_modal[]']:checked").each(function ()
{ temp=$(this).val();
i++;
checked.push($(this).val());
});
if (i==1)
$("#test").val(temp);
else if (i>1)
$("#test").val('multiple');
else if (i==0)
$("#test").val('nothing');
$("#modal").fadeOut();
// alert($("#do").val())
e.preventDefault();
});
});
Hope you can help me guys. If you guys can suggest to replace my javascript by using any php statement like if condition, I will try to test it.
Many thanks.
$("documant").ready(function() {
$("#add_form").hide(); //message box hide in the beginning
});
function checkID() {
if ($("#add_form").is(":hidden")) {
$("#userID").val("");
$("#add_form").slideDown(500);
} else {
$("#add_form").hide();
}
}
function closeForm() {
$("#add_form").hide(); // hide form when click cancel
}
.center {
position: absolute;
text-align: center;
z-index: 100;
}
#add_form {
margin: 0 auto;
width: 200px;
background-color: #f0f0f0;
}
#add_form p {
font-size: 1.2em;
}
#submitGetCancel,
#submitGetCheck {
width: 40%;
height: 50px;
color: #740000;
font-size: 1.3em;
}
#overlayBackground {
background: #000;
position: absolute;
top: 0px;
left: 0px;
z-index: 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="click" onclick="checkID();">Click</button>
<br/>
<p>Some text here</p>
<div class="center">
<div id="add_form">
<p>Please type your infos</p>
<input type="text" id="userID" name="userID">
<br/>
<button type="button" class="btn btn_cancel" id="submitGetCancel">Send</button>
<button type="button" class="btn btn_add" id="submitGetCheck" onclick="closeForm();">Cancel</button>
</div>
</div>
When I click on button, a message box will display.
What can I do to make my background color a little black which mean I can still see content under message box when message box is display and also everything will back to default when click cancel of box?
You can create a dynamic overlay div and set the background color with rgba():
$(document).ready(function() {
$("#add_form").hide(); //message box hide in the beginning
});
function checkID() {
if ($("#add_form").is(":hidden")) {
$("#userID").val("");
$("#add_form").slideDown(500);
$('<div/>',{ // <------------------create a dynamic overlay div
id:"overlay"
}).appendTo("body"); //<-----append to body.
} else {
$("#add_form").hide();
}
}
function closeForm() {
$("#add_form").hide(); // hide form when click cancel
$('#overlay').remove(); // <-----------------remove this overlay when cancel clicked.
}
.center {
position: absolute;
text-align: center;
z-index: 100;
}
#add_form {
margin: 0 auto;
width: 200px;
background-color: #f0f0f0;
}
#add_form p {
font-size: 1.2em;
}
#submitGetCancel,
#submitGetCheck {
width: 40%;
height: 50px;
color: #740000;
font-size: 1.3em;
}
#overlayBackground {
background: #000;
position: absolute;
top: 0px;
left: 0px;
z-index: 5;
}
#overlay{
background:rgba(0, 0, 0, .5);
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
z-index:2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="click" onclick="checkID();">Click</button>
<br/>
<p>Some text here</p>
<div class="center">
<div id="add_form">
<p>Please type your infos</p>
<input type="text" id="userID" name="userID">
<br/>
<button type="button" class="btn btn_cancel" id="submitGetCancel">Send</button>
<button type="button" class="btn btn_add" id="submitGetCheck" onclick="closeForm();">Cancel</button>
</div>
</div>
There is a jQuery plugin for that.
Also it's easy to use: $.blockUI({ message: 'HTML CONTENT HERE', css: { backgroundColor: '#f00'} });
There are more paramaters that you can use, depends on situation. To remove it just use $.unblockUI();
More details you can find here.
Below code is working almost correctly but it always displays the "choose file" button. I need the choose file button to not display and all that's left is a link that is a file uploader.
How do I create a file upload anchor tag link properly?
This is using bootstrap-filestyle.
$(function(){
$("#upload_link").on('click', function(e){
e.preventDefault();
$("#upload:hidden").trigger('click');
});
});
#upload_link{text-decoration:none;}
#upload{display:none}
<input id="upload" type="file"/>
Upload your photo
Use This CSS
.btn-file {
display: block;
height: 20px;
overflow: hidden;
position: relative;
vertical-align: middle;
width: 120px;
}
.btn-file > input {
cursor: pointer;
direction: ltr;
font-size: 23px;
margin: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transform: translate(-300px, 0px) scale(4);
}
input[type="file"] {
display: block;
}
Use This HTML
<span class="btn default btn-file">
<span class="fileinput-new">
Select Document
</span>
<input type="file" class="textbox wp95 fl fileupload fileInput" name="files" id="fileupload">
</span>