Good afternoon ,
I know this question has been asked a lot of times here, but all the answers there are not working for the problem I have.
I have a div called .title3 . When the user clicks it I want another div called .Content3 to be shown . But unfortunatelly it doesn't work the way I want to.
Here is a part of my html code where I found this problem :
<body style="background-color:#171717">
<div class="pseudo3">
<div class="one3">
<div class="Content3">
<p class="close">X</p>
<form action="order.php">
<input type="text" value="First & Last Name">
<input type="email" value="Your e-mail">
<input type="text" value="Your phone number">
<textarea>Write your feedback here</textarea>
<button>Send</button>
</form>
</div>
<div onmouseclick="showDiv()" class="title3">
FEEDBACK
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
function showDiv() {
var x = document.getElementsByClassName("title3");
if ( x.click === true ){
document.getElementsByClassName("Content3").style.display = "block";
}
}
</script>
</body>
CSS:
/* The Form Style */
form {
width: 100%;
height: 100%;
}
form input {
width: 100%;
height: 35px;
color: #8b8b8b;
font-family: 'Lato', sans-serif;
background-color: #171717;
padding: 12px;
border: 0;
outline: none;
border-top: 0.15px solid #262323;
border-left: 0.15px solid #262323;
border-right: 0.15px solid #262323;
}
form textarea {
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 200px;
color: #8b8b8b;
font-family: 'Lato', sans-serif;
background-color: #171717;
padding: 12px;
border: 0;
outline: none;
border-top: 0.15px solid #262323;
border-left: 0.15px solid #262323;
border-right: 0.15px solid #262323;
}
form button {
width: 100%;
height: 45px;
position: relative;
top: -3px;
color: #8b8b8b;
font-family: 'Lato', sans-serif;
background-color: #171717;
border: 0.15px solid #262323;
outline: none;
font-size: 20px;
}
input:focus,
textarea:focus,
button:focus{
background-color: #212020;
border-top: 0.15px solid #1f1616;
border-left: 0.15px solid #1f1616;
border-right: 0.15px solid #1f1616;
}
/* Content3 style */
.Content3 {
width: 300px;
height: 350px;
position: absolute;
z-index: 2;
display:none;
}
/* one3 style */
.one3 {
width: 300px;
height: 350px;
transition: 0.3s ease;
position: relative;
background-color: #141414;
}
/* pseudo3 style */
.pseudo3 {
width: 320px;
padding: 10px;
border-top: 2px solid #b95e1c;
border-bottom: 2px solid #ad7145;
background-image:
linear-gradient(#b95e1c, #ad7145),
linear-gradient(#b95e1c, #ad7145);
background-size: 2px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
}
/* title3 style */
.one3 .title3 {
padding: 30px;
font-size: 24px;
color: #8b8b8b;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
/* close style */
.close{
color: #8b8b8b;
font-size: 24px;
position:absolute;
left:-11px;
top:-62px;
z-index:3;
border-top: 0.5px solid #1f1616;
border-left: 0.5px solid #1f1616;
border-right: 0.5px solid #1f1616;
border-bottom: 0.5px solid #1f1616;
padding:10px 17px;
background-color:#212121;
transition: 0.2s ease-in-out;
}
.close:hover{
background-color: #8b8b8b;
color:#212121;
cursor:pointer;
transition: 0.2s ease-in-out;
}
JavaScript:
function showDiv() {
var x = document.getElementsByClassName("title3");
if ( x.click === true ){
document.getElementsByClassName("Content3").style.display = "block";
}
}
There are no error messages, but when I click my .title3 div it's not showing the div with class .Content3
You have many problems in your code. I will try to cover most of them
You use onmouseclick. That is not a valid javascript event. Use onclick.
You are trying to assign to variable x the HTML element with class title3. Here are 2 problems:
2.1. You do not need to assign the element you just clicked on to a variable inside the click function. You already have that element with event.target
2.2. By using getElementsByClassName you get a HTML Collection not a single element. ( see the plural Elements word ) You can get it using querySelector or by adding an id to it and use getElementById ( see the singular Element ). But again, you do not need to retrive it like that. You can use the event.target. As you click on it.
if ( x.click === true ){ . Why you need to check if the element is clicked, when the entire function is called only when that element is clicked ? Redundant check and not correct.
here again. See point 2.2
do not name your HTML attributes with capital letters. use content3
Do not import jquery, as you do not need it.
Check code below
function showDiv() {
document.querySelector(".Content3").style.display = "block";
}
.Content3 {
display:none
}
<div class="pseudo3">
<div class="one3">
<div class="Content3">
<p class="close">X</p>
<form action="order.php">
<input type="text" value="First & Last Name">
<input type="email" value="Your e-mail">
<input type="text" value="Your phone number">
<textarea>Write your feedback here</textarea>
<button>Send</button>
</form>
</div>
<div onclick="showDiv()" class="title3">
FEEDBACK
</div>
</div>
</div>
Useful links:
onclick event
getElementsByClassName
querySelector
event.target
You dont need jQuery to do that, you can also delete your onmouseover and use just this:
<script>
//add listener for click on your .title3
document.getElementsByClassName("title3")[0].addEventListener('click', function(e){
//prevent default action if any (dont need that in this case, but useful, if .title3 would be <a> tag)
e.preventDefault();
//set style
document.getElementsByClassName("Content3")[0].style.display = "block";
});
</script>
Can you use data property for this topic.
<div class="titles">
<button data-id="1">open 1</button>
<button data-id="2">open 2</button>
<button data-id="3">open 3</button>
</div>
<div class="contents">
<p data-id="1">context</p>
<p data-id="2">context</p>
<p data-id="3">context</p>
</div>
When any button clicked, take data-id and do anything inside of contents div with data-id. If you cannot understand I can send any example for this.
Related
I have an input tag in my HTML page as following.
I want to make an input tag width to fit the content and minimum width.
So I wrote CSS as follows.
.number-input {
width: fit-content;
min-width: 120px;
}
<div class="price-input">
<input type="text" value="200001230001003002" class="number-input">
<button class="save"></button>
</div>
Is it possible to adjust CSS so the input will fit the text width?
I searched already, but the answers use the javascript function.
Please anyone help.
This is a great time to use that rarely used unit of ch which is relative to the width of the "0" (zero) of the current font and font sized used! Then use JS to make the width equal to the length of the input in ch I've done this in 2 places, once when it loads, and then subsequently on the onkeypress so that it will expand when edited. Take a look here:
.number-input {
width: fit-content;
min-width: 120px;
}
<div class="price-input">
<input type="text" id="mytxt" onkeypress="this.style.width = (this.value.length) + 'ch';" value="200001230001003002" class="number-input" onload="myFunction()">
<button onload="myFunction()" class="save"></button>
</div>
<script>
function myFunction() {
document.getElementById("mytxt").style.width = (mytxt.value.length) + 'ch';
}
window.onload = myFunction();
</script>
You can do like this.
I posted two solution with span and data-*.
html
<p>solution with span <span class="number-input" role="textbox" contenteditable>200001230001003002</span></p>
<p>Solution with data-*<label class="input-sizer" data-value="200001230001003002">
<input class="number-input1" type="text" oninput="this.parentNode.dataset.value = this.value" size="1" value="200001230001003002">
</label></p>
<button class="save"></button>
-css
.number-input {
border: 1px solid #ccc;
font-family: inherit;
font-size: inherit;
padding: 1px 6px;
}
.number-input1{
font-family: inherit;
font-size: inherit;
}
.input-sizer {
display: inline-grid;
vertical-align: top;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font-family: inherit;
font-size: inherit;
}
.input-sizer::after
{
content: attr(data-value) " ";
visibility: hidden;
font-family: inherit;
font-size: inherit;
white-space: pre-wrap;
}
try this one
.number-input {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
<div class="container">
<div class="price-input">
<input type="text" value="200001230001003002" class="number-input">
<button>Click it</button>
</div>
</div>
I am working on my jquery script to remove the link by replace the text when I click on a button. I have got a problem with the cursor because when I click at the end of the text, it will move the cursor to the start of the text, example: when I click the cursor next to 2!, it will move the cursor at the start before the Video.
When I try this:
if (target.prop("nodeName") == "A") {
unlink(target);
$('#text_editor').focus().val(selected_text);
}
$(function() {
function unlink(link) {
var txt = link.text();
var sp = $("<span>").html(txt);
link.replaceWith(sp);
}
function getObjectFromCursor() {
var obj, sel = window.getSelection() ? window.getSelection() : document.selection;
var range = sel.getRangeAt(0);
obj = $(range.startContainer.parentElement);
return obj;
}
$("#toolbar").on("click", "#toolbar_unlink", function() {
var target = getObjectFromCursor();
if (target.prop("nodeName") == "A") {
unlink(target);
selected_text = window.getSelection().getRangeAt(0).endContainer.wholeText;
$('#text_editor').focus().val(selected_text);
}
})
});
.toolbar_button_unlink_icon {
background-image: url(https://cdn.iconscout.com/icon/premium/png-256-thumb/unlink-1507684-1280083.png);
background-position: center;
background-repeat: no-repeat;
background-size: 20px;
opacity: 0.55;
}
.toolbar_button {
display: inline-block;
height: 26px;
width: 28px;
padding: 4px 6px;
outline: 0;
cursor: default;
float: left;
border: 0;
background-color: #f8f8f8;
position: relative;
}
.toolbar_button:hover {
background-color: #e5e5e5;
border: 1px solid #bcbcbc;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toolbar" class="toolbar_top" role="toolbar" style="height: 100px; user-select: none;">
<button id="toolbar_unlink" class="toolbar_button toolbar_button_unlink_icon" command="+unlink" data-toggle="tooltip" data-placement="bottom" title="Remove link (CTRL+SHIFT+F9)" style="user-select: none; position: relative; margin-left: 3px; margin-top: 13px; outline: none; z-index: 0;" button="" type="button"></button>
</div>
<div id="text_editor" class="editor_message" hidefocus="false" aria-label="Message Body" g_editable="true" role="textbox" aria-hidden="true" aria-multiline="true" contenteditable="true" tabindex="1" style="direction: ltr; height: 500px; width: 100%; padding-left: 25px; padding-top: 18px; font-size: 16px; border-bottom: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; overflow-y: auto;" itacorner="6,7:1,1,0,0">
<div>Video Here 1!</div>
<div>Video Here 2!<br></div>
<div>Video Here 3!</div>
<div></div>
</div>
Here is the fiddle: https://jsfiddle.net/bL71nasw/
What I want to achieve is when I click on the text "Video Here 1!", "Video Here 2!", "Video Here 3!" or whatever it is and when I click on a button to remove the hyperlink to replace with a text, I want to move the cursor next to the text 2!, 3! or whatever it is.
Can you please show me example how I can move the cursor next to the text 1!, 2!, 3! or whatever it is in the contenteditable?
Thank you.
i had created a layout in which i have a form with multiple inputs and a block element (Div) which has already created. Now i want give value (as in px) in input fields and block should be recreated for e.g if the block has 30px width and 30px height initially now i want to change it through inputs when i submit the form the block should be recreated. i think this is to be done in javascript or jquery. Please help me out of this situation your will will be appericiated. here is code below
This is the Fiddle https://jsfiddle.net/gr0q5ea0/
Html
<div class="form-container">
<form action="" id="myForm" name="myForm">
<div class="recreateBox"></div>
<div class="form-row">
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Height:</label>
<input type="text" class="form-input inputbox" name="height">
</div>
</div>
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Width:</label>
<input type="text" class="form-input inputbox" name="width">
</div>
</div>
</div>
<div class="form-row">
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Border Width:</label>
<input type="text" class="form-input inputbox" name="Borderwidth">
</div>
</div>
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Border Radius:</label>
<input type="text" class="form-input inputbox" name="Borderradius">
</div>
</div>
</div>
<div class="form-row">
<div class="input-container">
<button type="submit" class="btnSubmit" >Submit</button>
</div>
</div>
</form>
</div>
css
.form-container{
position: relative;
width: 100%;
padding: 8px;
box-sizing: border-box;
background: rgba(40, 91, 255, 0.24);
margin: auto auto 35px auto;
max-width: 50%;
top: 17px;
}
.input-container{
width: 100%;
height:auto;
padding-bottom: 12px;
}
.form-label{
font-weight: bold;
margin-bottom: 10px;
font-size: 15px;
display: block;
color:#000;
}
.form-input{
display: block;
width: 50%;
height: 35px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-row{
position: relative;
width: 100%;
padding: 14px;
display: inline-block;
box-sizing: border-box;
}
.btnSubmit{
padding: 10px 40px;
position: relative;
background: #31708f;
border-radius: 5px;
outline: none;
box-shadow: none;
color: white;
border:none;
}
.leftSetction ,.rightSection{
width: 49%;
padding-top: 12px;
box-sizing: border-box;
padding-right: 30px;
position: relative;
float: left;
}
.inputbox{
width: 100%;
}
.recreateBox{
width:150px;
height:150px;
position: relative;
margin: 0 auto;
padding: 15px;
background: #5cb85c;
}
With jQuery you can solve it like this (demo here https://codepen.io/8odoros/pen/rmOyEN)
$('.btnSubmit').click(function(){
//Get the given values
var h = $('input[name=height]').val();
var w = $('input[name=width]').val();
var bw = $('input[name=Borderwidth]').val();
var br = $('input[name=Borderradius]').val();
//Set the values
$('.recreateBox').css('height',h);
$('.recreateBox').css('width',w);
$('.recreateBox').css('border-width',bw);
$('.recreateBox').css('border-radius',br+'px');//Needs that 'px' to work
});
There's no need to use form submit for this, so I also changed the button type from submit to button
Try using jQuery to solve it. Whenever the form is submitted just give the box a new CSS-attribute:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
// Hook onto the form's submittion-event
$('#myForm').submit( function( event ) {
// Cancel the original submitting-event
event.preventDefault();
// Retrieve the values from the inputfields
var height = $('#myForm input[name="height"]').val();
var width = $('#myForm input[name="width"]').val();
var borderWidth = $('#myForm input[name="Borderwidth"]').val();
var borderRadius = $('#myForm input[name="Borderradius"]').val();
// Retrieve field (best practice for jQuery)
$recreateBox = $('.recreateBox');
// Set CSS-attributes of the box
$recreateBox.css('height', height);
$recreateBox.css('width', width);
$recreateBox.css('border-width', borderWidth);
$recreateBox.css('border-radius', borderRadius + 'px');
});
</script>
Just copy & paste this at the bottom of your file.
Updated JSFiddle: https://jsfiddle.net/gr0q5ea0/5/
Best of luck!
Take value for input height and width and use jquery for modifying the width and height of the box.
var height= $("input[name=height]").val();
$(".recreateBox").css("height", height);
if you know this can be done through jquery what you have tried ?
you can get the value of the input boxes using class selector something like this -
var a = $('.input').val()
and then use that value to set the css od that div -
$(".yourDiv").css({"height": a });
you can do all this on the click event of the button.
Thanks to some awesome people on stack overflow i was able to get my classes toggled and got my form slide up and down correctly. I'm having issues validating the form before it becomes submitted. Could someone help me with a step in the right direction? I just want the validation to check that the fields have some text in them before allowing the submit.
Assignment 6
<!-- video https://youtu.be/XEoWYcolaEM -->
<style>
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: 100%;
}
a {
color: blue;
}
#welcome p strong {
color: navy;
font-size: 1.2em;
}
#welcome p:first-of-type {
margin-bottom: 50px;
}
section {
margin-bottom: 50px;
}
/* main container */
#main {
width: 960px;
margin: 50px auto;
border: 2px solid #000;
padding: 20px;
background-color: #e0e0ff;
position: relative;
box-sizing: border-box;
}
/* form container */
#loginDiv {
width: 300px;
position: absolute;
left: 650px;
top: 6px;
z-index: 100;
border: 1px solid navy;
}
/* paragraph that shows the text "Login" which is clicked on to display/remove the form */
#login {
margin: 0;
cursor: pointer;
background-color: rgb(255,255,255);
padding: 5px 0 2px 30px;
}
#login:hover {
background-color: rgb(110,138,195);
}
/* plus sign icon for login form */
.plus {
background: url(img_open.png) no-repeat 8px 7px;
background-color: rgb(110,138,195);
}
/* minus sign icon for login form */
.minus {
background: url(img_close.png) no-repeat 8px 7px;
}
/*form is hidden when the page loads */
#loginDiv form {
padding: 10px 10px 10px 10px;
display: none;
background-color: rgb(255,255,255);
}
#loginDiv label {
display: block;
width: 100px;
margin: 0 15px 0 0;
}
#loginDiv input {
font-size: 1.2em;
border: 1px solid navy;
}
#loginDiv input:focus {
background-color: rgb(110,138,195);
border: 2px solid navy;
}
#loginDiv input[type=button] {
width: 100px;
}
footer {
text-align: center;
margin-top: 50px;
margin-bottom: 10px;
padding: 20px;
border-top: 1px solid #000;
}
/* ad is not shown when the page loads */
#ad {
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: yellow;
position: absolute;
left: 330px;
top: -500px; /* you can change this inbitially for viewing purposes only but be sure to set it back */
box-sizing: border-box;
background-image: url(ad.jpg);
background-repeat: no-repeat;
}
/* close button on ad */
#adbtn {
width: 50px;
height: 50px;
border: 2px solid #000;
border-top-width: 1px;
border-right-width: 1px;
background-color: #fff;
font-size: 3em;
text-align: center;
cursor: pointer;
box-sizing: border-box;
position: absolute;
top: 0px;
right: 0px;
}
</style>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script>
//Fading in Advertisent
$(document).ready(function(){
$("#ad").animate({
top: '100px',
},(5000));
//Closing The Advertisement
$("#adbtn").click(function(){
$("#ad").fadeOut(5000);
});
$(".plus").click(function(){
$("form").slideToggle(1000); // half second duration
$(this).toggleClass("plus").toggleClass("minus");
$('button').click(function(){
$("form").val(1);
});
}); // end function
}); // end function
</script>
</head>
<body>
<!-- main container -->
<div id="main">
<section id="loginDiv">
<!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
<p id="login" class="plus">Login</p>
<form>
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="pw">Password:</label>
<input type="password" name="pw" id="pw">
</p>
<p>
<input type="button" value="Submit">
</p>
<!-- placeholder for response if form data is correct/incorrect -->
<p id="error"> </p>
</form>
</section>
<section id="welcome">
<h1>Welcome to the Local jQuery User Group Website</h1>
<p> <strong>Click the login button at the top of the page to login. To become a member please Register</strong> </p>
<h2>About this page layout:</h2>
<p> The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to
that main container. Otherwise, it would default to being absolutley positioned with respect to the window. </p>
<p> In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise,
it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of
the normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container. </p>
</section>
<section>
<h2>This week's agenda:</h2>
<p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software.
It will be recorded! Please note that the code samples will be available on our GitHub repository. </p>
</section>
<footer> Copyright © Local jQuery User Group </footer>
<!-- ad which is absolutely positioned -500px from the top so you do not see it when page loads-->
<div id="ad">
<div id="adbtn"> X </div>
</div>
<!-- end main container -->
</div>
</body>
</html>
Take a look into jQuery Validate.
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.
I hope you can learn from this. I'll just give you an example with one of your fields and a submit button. Initially the submit button is disabled, then you can use the keypress event to check if 1 or more characters are entered and enable the submit button.
Fiddle: https://jsfiddle.net/stevenng/8w89v3tp/1/
HTML:
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<button class="js-submit">submit</button>
JS:
var $submit = $('.js-submit');
var $username = $('#username');
$submit.attr('disabled', true);
$username.keypress(function() {
if ( $username.val().length > 0 ) {
$submit.attr('disabled', false);
}
});
$submit.on('click', function(){
// do something
});
I have a page where clicking on the button it should greyout the background and the popup msg should be displayed over the greyout area..What im getting now is popup displayed over the alone background is not greyout .
This the script and style im applying
<script>
function deselect() {
$(".pop").hide();
}
$(function () {
$("#decline").live('click', function () {
$(".pop").css({ "display": "block", opacity: 0.7, "width": $(document).width(), "height": $(document).height() });
$(".pop").show();
});
$("#close").live('click', function () {
deselect();
return false;
});
});
</script>
<style type="text/css">
.messagepop {
background-color: #FFFFFF;
border: 1px solid #999999;
cursor: default;
display: none;
margin-top: -39em;
margin-left: 26em;
position: absolute;
text-align: left;
width: 394px;
z-index: 50;
padding: 25px 25px 20px;
}
.popuptxt {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
font-weight: 700;
}
.popupbtn {
padding-top: 15px;
padding-left: 135px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
</style>
THis html code
<input id="decline" type=button name="Decline" value="Decline">
<div class="messagepop pop">
<span><font class="popuptxt">By clicking decline, download will not occur, and window will close</font></span>
<div class="popupbtn">
<input type="button" name="Ok" class="btn btn-sm btn-orange" value="<%=labelutils.printTranslatedValues("Ok")%>" onclick="window.open('', '_self', ''); window.close();">
<input id="close" type="button" name="Cancel" class="btn btn-sm btn-gray-dark" value="<%=labelutils.printTranslatedValues("Cancel")%>">
</div>
</div>
Your code was a mess.
.live() doesn't exist, I replaced that with .on()
I made your popup fixed instead of absolute and positioned it correctly
Instead of using opacity, you should use a semitransparent background color, otherwise the contents of the element also become semi-opaque.
I also cleaned up your JS a little bit to make it easier to manage.
I also removed that on-click function you had on that OK-button - I'd advice against using that with user-friendliness in mind
function deselect() {
$(".pop").hide();
return false;
}
function select(){
$(".pop").css({
display: "block",
opacity: 1,
width: $(document).width(),
height: $(document).height()
});
$(".pop").show();
}
$(function () {
$("#decline").on('click', select);
$("#close").on('click', deselect);
});
.messagepop {
background-color:rgba(255,255,255,.7);
border:1px solid #999999;
cursor:default;
display:none;
position:fixed;
top:0;
left:0;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
.popuptxt {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
font-weight: 700;
}
.popupbtn {
padding-top: 15px;
padding-left: 135px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="decline" type=button name="Decline" value="Decline">
<div class="messagepop pop">
<span>
<font class="popuptxt">
By clicking decline, download will not occur, and window will close
</font>
</span>
<div class="popupbtn">
<input type="button" name="Ok" class="btn btn-sm btn-orange" value="OK">
<input id="close" type="button" name="Cancel" class="btn btn-sm btn-gray-dark" value="Cancel">
</div>
</div>
Found two issues:
Looks like the 'live' function you're using doesn't exist in jQuery since version 1.9. So unless it's coming from some other library, that's where you're main problem is.
Your .messagepop div isn't positioned correctly, and hence doesn't show up on-screen. You want the parent element to have position:relative, and then set position:absolute on .messagepop and top:0; left:0 to align it correctly.
Rudimentary working version here: http://jsfiddle.net/xj3pL213/