Html button works well, but css button doesn't

Html button works well, but css button doesn't - javascript

I'm not a pro on coding, I created a popup script to use with a cpa redirect after user click the css button on the second popup.
But when user clicks the css button, nothing happens. I added a html button and it works like a charm. I tried to figure out the root cause but had no luck.
run the code here on w3schools.com
$(function() {
openUp('#overlay')
$("#popup").on('click', function() {
openUp('#overlay2')
closeDown('#overlay')
});
function openUp(el) {
$(el).fadeIn(500, function() {
$(this).next().show();
});
}
function closeDown(el) {
$(el).fadeOut(500, function() {
$(this).next().hide();
});
}
$('a').each(function(index, element) {
$(this).click(function(e) {
e.preventDefault();
});
});
});
#DIV_1 {
bottom: 0px;
box-shadow: rgba(255, 255, 255, 0.298) 0px 0px 2px 0px inset, rgba(255, 255, 255, 0.298) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 39px;
left: 0px;
letter-spacing: 2px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 79, 132) 0px 1px 0px;
text-size-adjust: 100%;
top: 0px;
width: 135px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 53.2344px 19.5px;
transform-origin: 53.2344px 19.5px;
caret-color: rgb(255, 255, 255);
background: rgb(0, 109, 183) linear-gradient(0deg, rgb(0, 109, 183), rgb(0, 139, 234)) repeat scroll 0% 0% / auto padding-box border-box;
border-top: 1px solid rgb(0, 79, 132);
border-right: 1px solid rgb(0, 79, 132);
border-bottom: 2px solid rgb(0, 79, 132);
border-left: 1px solid rgb(0, 79, 132);
font: normal normal 700 normal 10px / 10px Lego, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 13px 14px;
}
/*#DIV_1*/
img {
width: 100%;
object-fit: scale-down;
min-width: 100%;
height: auto;
}
.form-style-5 {
max-width: 500px;
display: inline-block;
padding: 8px 16px;
background: #f4f7f8;
margin: 8px auto;
padding: 16px;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 8px;
}
.form-style-5 label {
display: block;
margin-bottom: 6px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 30px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 17px 37px 16px 37px;
color: #000;
margin: 0 auto;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #ffcf00;
border-width: 1px 1px 3px;
margin-bottom: 10px;
background: rgb(255, 207, 0) none repeat scroll 0% 0% / auto padding-box border-box;
box-shadow: rgba(232, 105, 2, 0.5) 0px 0px 25px 0px inset;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
background: #ffae00;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.1s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?id={removed my aff id}"></script>
<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup" style="position:fixed; display:none; top:110px; width:90%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<img class="aligncenter wp-image-21 size-full" src="https://images1.sykesassets.co.uk/assets/_files/cached/property/1500x1125/2906/sc_131608230613_2906_12.jpg" alt="ALT TEXT" width="492" height=a uto; />
<p <div id="DIV_1">
PROCEED >>
</p>
</div>
<div id="overlay2" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.1; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup2" style="position:fixed; display:none; top:110px; width:85%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<p style="color:#FFFFFF;">
</p>
<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number"></span> Please enter your information</legend>
<input type="text" name="field1" placeholder="Receiver's full name *">
<input type="email" name="field2" placeholder="Email *">
<textarea name="field3" placeholder="Shipping address:"></textarea>
<label for="job">Country:</label>
<select id="job" name="field4">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
<textarea name="field5" placeholder="Greeting message: Eg. Hi Jonathan, ..Loving sister, Christina."></textarea>
</fieldset>
<button type="button" id="myBtn" onclick="og_load();">Apply</button>
<button class="button" style="vertical-align:middle" onclick="og_load();"><span>Apply </span></button>
</form>
</div>
</div>
<head>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?(removed my affiliate code)"></script>
</head>

Not sure what a 'css-button' is, but why not just add your .button class to the button like so:
<button class="button" type="button" id="myBtn" onclick="og_load();">Apply</button>

Related

Why the same button animation cannot use inside form?

I tried to add an animation for my form submit button on my Todo list.
Unfortunately, the same button animation works outside form, but inside form only can hover the text. I have no idea where the problem is?
import React from "react";
class TodoForm extends React.Component {
render() {
return (
<div>
<div className={"container"}>
<form action="">
<h1>Todo List</h1>
<input type="text" placeholder={""}/>
<button className="custom-btn btn">Submit</button>
</form>
<button className="custom-btn btn">Submit</button>
</div>
</div>
);
}
}
export default TodoForm;
.container {
display: flex;
flex-direction: row;
/*align-items: center;*/
justify-content: center;
margin-top: 5%;
}
form {
height: 500px;
width: 400px;
background-color: #f4f7fc;
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}
h1 {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
input[type='text'] {
border: 1px solid #ddd;
height: 6%;
min-width: 60%;
transition: all ease-in 0.25s;
}
.custom-btn {
margin-left: 5px;
width: 25%;
height: 37px;
border-radius: 5px;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
}
.custom-btn, input[type='text'] {
box-shadow: 1px 1px 1px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
.btn {
border: 2px solid #f4f7fc;
color: #f59cb1;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
.btn:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn:hover {
color: #FF6F91;
}
.btn:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn:active {
top: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

The background color doesn't let you see the animation, just comment it;
form {
height: 500px;
width: 400px;
/*background-color: #f4f7fc;*/
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}

JQuery onclick change z-index

Main Goal:
"a page's z-index to move to the most front once clicked and the most front to be behind the clicked one."
My approach: onclick change the clicked class z-index to the most front and subtract the current most front z-index by one
//vars
var firstPage = $('.page-hub');
//check what class is clicked
$('div').click(function() {
var theClass = this.className;
alert(theClass);
if(theClass == 'page page-1' && theClass.css('z-index') != firstPage){
alert ('move me to front!');//most front z-index -= 1 and the clicked class page to z-index of 4
theClass.css('z-index', '4');
firstPage.css('z-index', '-=1');
firstPage = theClass;
}
//and now the firstPage var is supposedly be the new clicked class which is page .page-1
});
ps: This is what I came up with but I'm not sure how to write it or this approach may be wrong entirely.
and I'm not sure whats the best approach to this is. I'm down to basically rewrite everything really. I'm very desperate at this point, Thank you in advance.
css:
margin-left: 0px;
transition: margin-left .6s;
}
.page-container .page {
position: absolute;
width: 1200px;
height: 712px;
box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}
/*page-hub*/
.page-hub-inside {
transform: scale(1);
transition: transform .6s;
}
ul.roulette-title {
width: 100%;
text-align: center;
margin-top: 200px;
}
ul li.roulette-title-text {
font-family: "LeagueGothic";
font-size: 170px;
display: inline;
margin-left: 5px;
}
ul h2.wheel-sub-title {
font-family: "Halimun";
color: white;
font-stretch: ultra-expanded;
font-size: 40px;
}
.page-hub {
z-index: 4;
background-color: rgb(32, 32, 32);
margin-left: 0px;
}
.page-hub-bookmark-arrow {
margin-top: 205px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(32, 32, 32);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-hub:hover .page-hub-inside {
transform: scale(1.05);
}
/*page-1*/
.page-1 {
margin-left: 50px;
z-index: 3;
background-color: rgb(255, 111, 111);
transition: margin-left .6s;
}
.page-1 .page-1-bookmark-arrow {
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 111, 111);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-1:hover {
margin-left: 100px;
}
/*page-2*/
.page-2 {
margin-left: 100px;
z-index: 2;
background-color: rgb(138, 202, 255);
transition: margin-left .6s;
}
.page-2 .page-2-bookmark-arrow {
margin-top: 50px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(138, 202, 255);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-2:hover {
margin-left: 150px;
}
/*page-3*/
.page-3 {
margin-left: 150px;
z-index: 1;
background-color: rgb(255, 253, 149);
transition: margin-left .6s;
}
.page-3 .page-3-bookmark-arrow {
margin-top: 100px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 253, 149);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-3:hover {
margin-left: 200px;
}
/*page-rule*/
.page-rule {
width: 100%;
height: 100%;
position: fixed;
background-color: #fff;
z-index: 0;
}
.page-rule-hover-fx {
margin-left: -50px;
transition: margin-left .6s;
}
html:
<div class="page-container">
<div class="page page-hub">
<div class="page-hub-inside">
<ul class="roulette-title">
<li class="roulette-title-text" style="color: rgb(255, 253, 149);">R</li>
<li class="roulette-title-text" style="color: rgb(138, 255, 154);">O</li>
<li class="roulette-title-text" style="color: rgb(138, 212, 255)">U</li>
<li class="roulette-title-text" style="color: rgb(255, 111, 111);">L</li>
<li class="roulette-title-text" style="color: rgb(138, 255, 154);">E</li>
<li class="roulette-title-text" style="color: rgb(138, 212, 255)">T</li>
<li class="roulette-title-text" style="color: rgb(255, 253, 149)">T</li>
<li class="roulette-title-text" style="color: rgb(255, 111, 111);">E</li>
<h2 class="wheel-sub-title">~ Wheel ~</h2>
</ul>
</div>
<div class="page-hub-bookmark-arrow"></div>
</div>
<div class="page page-1">
<div class="page-1-bookmark-arrow"></div>
</div>
<div class="page page-2">
<div class="page-2-bookmark-arrow"></div>
</div>
<div class="page page-3">
<div class="page-3-bookmark-arrow"></div>
</div>
</div>
<div class="page-rule">
<div class="page-rule-hover-fx"></div>
</div>

If i have understood your problem ....
I suggest you instead to swap the z-index, to swap the classes, because classes are linked to z-index.. If you really want to swap z-index this is one solution..if you prefer to use classes uncomment the code with swapping classeS...In anyway you have a good start to analyse my code.
$('div .page').on('click', function(event){
event.stopPropagation();
var z_clicked = $(this).css('z-index');
var class_clicked = $(this).attr('class');
alert('clicked on z-index =' + z_clicked +' classes=' + class_clicked);
if(z_clicked == 4) return false;
//trap the div which has z-index = 4
var z4 = $('div .page').filter(function(){
return $(this).css('z-index') == 4;
});
// uncomment if you want to swap the classes instead z-index
//swap the classes betwwen div clicked and div on topFront
//var class_toBack = z4.attr('class');
//z4.toggleClass(class_toBack).toggleClass(class_clicked);
//$(this).toggleClass(class_clicked).toggleClass(class_toBack);
//swap the z-index
alert('z4 classes=' + z4.attr('class'));
z4.css('z-index', $(this).css('z-index'));
$(this).css('z-index', 4);
// alert(z4.css('z-index'));
});
.page-container .page {
position: absolute;
width: 1200px;
height: 712px;
box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}
/*page-hub*/
.page-hub-inside {
transform: scale(1);
transition: transform .6s;
}
ul.roulette-title {
width: 100%;
text-align: center;
margin-top: 200px;
}
ul li.roulette-title-text {
font-family: "LeagueGothic";
font-size: 170px;
display: inline;
margin-left: 5px;
}
ul h2.wheel-sub-title {
font-family: "Halimun";
color: white;
font-stretch: ultra-expanded;
font-size: 40px;
}
.page-hub {
z-index: 4;
background-color: rgb(32, 32, 32);
margin-left: 0px;
}
.page-hub-bookmark-arrow {
margin-top: 205px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(32, 32, 32);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-hub:hover .page-hub-inside {
transform: scale(1.05);
}
/*page-1*/
.page-1 {
margin-left: 50px;
z-index: 3;
background-color: rgb(255, 111, 111);
transition: margin-left .6s;
}
.page-1 .page-1-bookmark-arrow {
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 111, 111);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-1:hover {
margin-left: 100px;
}
/*page-2*/
.page-2 {
margin-left: 100px;
z-index: 2;
background-color: rgb(138, 202, 255);
transition: margin-left .6s;
}
.page-2 .page-2-bookmark-arrow {
margin-top: 50px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(138, 202, 255);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-2:hover {
margin-left: 150px;
}
/*page-3*/
.page-3 {
margin-left: 150px;
z-index: 1;
background-color: rgb(255, 253, 149);
transition: margin-left .6s;
}
.page-3 .page-3-bookmark-arrow {
margin-top: 100px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 253, 149);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-3:hover {
margin-left: 200px;
}
/*page-rule*/
.page-rule {
width: 100%;
height: 100%;
position: fixed;
background-color: #fff;
z-index: 0;
}
.page-rule-hover-fx {
margin-left: -50px;
transition: margin-left .6s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
<div class="page page-hub">
<div class="page-hub-inside">
<h2 class="wheel-sub-title">~ Wheel ~</h2>
</ul>
</div>
<div class="page-hub-bookmark-arrow"></div>
<div class="page page-1">
<div class="page-1-bookmark-arrow"></div>
</div>
<div class="page page-2"> </div>
<div class="page-2-bookmark-arrow"></div>
</div>
<div class="page page-3">
<div class="page-3-bookmark-arrow"></div>
</div>
</div>
<div class="page-rule">
<div class="page-rule-hover-fx"></div>
</div>

close button isn't working on popup window

I've made a popup window by searching on google. I don't have too much knowledge about web development. By ready and experimenting multiple website pages I've made a Modal for my website. I've set everything in that popup as my per needs and it works fine except the close button.
Can you please be kind to take a look on my following code and guide me how can I make close button working?
jQuery(document).ready(function() {
jQuery("#dialog-message").css("display", "block");
jQuery("#close-btn").click(function() {
jQuery(this).parents('#dialog-message').hide();
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
.exit_popup-sec {
width: 915px;
position: relative;
padding: 0px;
margin: 0 auto;
}
.exit_popup-sec .exit_popup-content {
background-color: #fff;
margin: 0px;
padding: 34px 62px 60px 62px;
box-sizing: border-box;
width: 100%;
float: left;
-webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
-moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
}
.exit_popup-sec .exit_popup-content h2 {
margin: 0px;
padding: 0px;
color: #ffff00;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
width: 400px;
float: left;
}
.exit_popup-sec .exit_popup-content h3 {
margin: 20px 0 30px 0;
color: #FFF;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
width: 400px;
float: left;
line-height: 26px;
}
.exit_popup-sec .exit_popup-content .getoffer-btn {
width: 50%;
padding: 20px 0px;
margin: 0px;
clear: both;
float: left;
border: 0px;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
text-shadow: 0 2px 2px #000;
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.56);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.56);
background: -moz-linear-gradient(top, #337ab7 1%, #4f4fe8 100%);
;
background: -webkit-linear-gradient(top, #337ab7 1%, #4f4fe8 100%);
background: linear-gradient(to bottom, #337ab7 1%, #4f4fe8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6c00', endColorstr='#ff0000', GradientType=0);
cursor: pointer;
}
.exit_popup-sec .exit_popup-content .getoffer-btn:hover {
background: #ff0000;
}
.exit_popup-sec .exit_popup-content .getoffer-btn:focus {
outline: none;
}
.popup-graybox {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 100vh;
z-index: 99999;
align-items: center;
display: flex;
box-sizing: border-box;
overflow: auto;
}
.exit_popup-sec .booknow-popup-clsbtn {
font-size: 14px;
line-height: 18px;
width: 28px;
height: 28px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #FFF;
position: absolute;
right: -7px;
top: -14px;
border: 0px;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.27);
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.27);
cursor: pointer;
}
.exit_popup-sec .booknow-popup-clsbtn:hover {
color: #fff;
background: #252525;
}
#media only screen and (max-width:815px) {
.exit_popup-sec {
width: 95%;
}
.exit_popup-sec .exit_popup-content {
padding: 20px 30px 50px 30px;
}
.exit_popup-sec .exit_popup-content h2 {
font-size: 80px;
}
.exit_popup-sec .exit_popup-content h3 {
width: 350px;
}
}
#media only screen and (max-width:480px) {
.exit_popup-sec .exit_popup-content h3 {
width: 100%;
box-sizing: border-box;
}
.exit_popup-sec .exit_popup-content h2 {
width: 100%;
box-sizing: border-box;
}
.exit_popup-sec .exit_popup-content h2 {
font-size: 30px;
}
.exit_popup-sec .exit_popup-content h3 {
font-size: 14px;
line-height: 30px;
}
}
.ui-widget-content a {
color: #72d6d6;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-message">
<section class="popup-graybox">
<div class="exit_popup-sec">
<div class="exit_popup-content" style="background: #252525 url(https://pakxchange.com/pop-up/webmoney.png) no-repeat right 0;">
<h2 data-edit="text">Webmoney Account Verification</h2>
<h3 data-edit="text">We are the only Country Representative of Webmoney Payment Network in Pakistan. We verify webmoney users, their documents and issue them Initial & Personal passports. READ MORE</h3>
<button class="getoffer-btn" type="submit">Our Certified Webmoney Account</button>
<button class="booknow-popup-clsbtn close-btn close-btn">X</button>
</div>
</div>
</div>
</section>

jQuery(document).ready(function() {
jQuery("#dialog-message").css("display", "block");
jQuery("#popup_close_btn").click(function() {
jQuery(this).parents('#dialog-message').hide();
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
.exit_popup-sec {
width: 915px;
position: relative;
padding: 0px;
margin: 0 auto;
}
.exit_popup-sec .exit_popup-content {
background-color: #fff;
margin: 0px;
padding: 34px 62px 60px 62px;
box-sizing: border-box;
width: 100%;
float: left;
-webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
-moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
}
.exit_popup-sec .exit_popup-content h2 {
margin: 0px;
padding: 0px;
color: #ffff00;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
width: 400px;
float: left;
}
.exit_popup-sec .exit_popup-content h3 {
margin: 20px 0 30px 0;
color: #FFF;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
width: 400px;
float: left;
line-height: 26px;
}
.exit_popup-sec .exit_popup-content .getoffer-btn {
width: 50%;
padding: 20px 0px;
margin: 0px;
clear: both;
float: left;
border: 0px;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
text-shadow: 0 2px 2px #000;
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.56);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.56);
background: -moz-linear-gradient(top, #337ab7 1%, #4f4fe8 100%);
;
background: -webkit-linear-gradient(top, #337ab7 1%, #4f4fe8 100%);
background: linear-gradient(to bottom, #337ab7 1%, #4f4fe8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6c00', endColorstr='#ff0000', GradientType=0);
cursor: pointer;
}
.exit_popup-sec .exit_popup-content .getoffer-btn:hover {
background: #ff0000;
}
.exit_popup-sec .exit_popup-content .getoffer-btn:focus {
outline: none;
}
.popup-graybox {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 100vh;
z-index: 99999;
align-items: center;
display: flex;
box-sizing: border-box;
overflow: auto;
}
.exit_popup-sec .booknow-popup-clsbtn {
font-size: 14px;
line-height: 18px;
width: 28px;
height: 28px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #FFF;
position: absolute;
right: -7px;
top: -14px;
border: 0px;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.27);
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.27);
cursor: pointer;
}
.exit_popup-sec .booknow-popup-clsbtn:hover {
color: #fff;
background: #252525;
}
#media only screen and (max-width:815px) {
.exit_popup-sec {
width: 95%;
}
.exit_popup-sec .exit_popup-content {
padding: 20px 30px 50px 30px;
}
.exit_popup-sec .exit_popup-content h2 {
font-size: 80px;
}
.exit_popup-sec .exit_popup-content h3 {
width: 350px;
}
}
#media only screen and (max-width:480px) {
.exit_popup-sec .exit_popup-content h3 {
width: 100%;
box-sizing: border-box;
}
.exit_popup-sec .exit_popup-content h2 {
width: 100%;
box-sizing: border-box;
}
.exit_popup-sec .exit_popup-content h2 {
font-size: 30px;
}
.exit_popup-sec .exit_popup-content h3 {
font-size: 14px;
line-height: 30px;
}
}
.ui-widget-content a {
color: #72d6d6;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-message">
<section class="popup-graybox">
<div class="exit_popup-sec">
<div class="exit_popup-content" style="background: #252525 url(https://pakxchange.com/pop-up/webmoney.png) no-repeat right 0;">
<h2 data-edit="text">Webmoney Account Verification</h2>
<h3 data-edit="text">We are the only Country Representative of Webmoney Payment Network in Pakistan. We verify webmoney users, their documents and issue them Initial & Personal passports. READ MORE</h3>
<button class="getoffer-btn" type="submit">Our Certified Webmoney Account</button>
<button class="booknow-popup-clsbtn close-btn close-btn" id="popup_close_btn">X</button>
</div>
</div>
</div>
</section>
You are refering to close button by id, and you have not assigned any id to the close button. Please assign the id to close button. it should work.
If you want to have to use css selector way to fix this:
$(".booknow-popup-clsbtn").

How to place a div beside input box on focus?

I have a scenario,that I used css for extending search box on focus,when I focussed on search box then the search box must decrease and the cancel button must be placed beside of search box.
Css:
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
}
: content-box;
font-size: 100%;
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing
}
Here is my plunker link:
https://plnkr.co/edit/Z7mfglWEoDyjbDfFDbLM?p=preview
And the expected output will be like this:
Is it possible with Angularjs or JavaScript?

Possible solution would be to position the div you want absolutely. Then on focus of the input, make the div visible or slide it into view;
Using your plunk, add the following CSS:
.clrble{
position: relative;
}
.frmcntr:focus + .btn{
display: block;
}
.btn{display: none; position: absolute; right: 0;}
and here's the HTML:
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div class="btn">button here</div>
</div>
It's not perfect, but i think it will point you in the right direction.

with float property you can mange the side by side positions.
use float:left; css property for you textbox class and that will work for your requirement and the placement of button also can be handle by css also.
css for textbox
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}

You can just hide and show a span with 'cancel' in it.
/* Styles go here */
.clrble .frmcntr {
background: url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family: SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color: rgba(247, 247, 247, 1);
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
background-color: rgba(247, 247, 247, 1);
background: url("images/search.png") no-repeat 10px center;
padding-left: 40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
.clrble {
position: relative;
}
.frmcntr:focus+.btn {
display: block;
}
.btn {
display: none;
position: absolute;
right: 0;
}
.cancel {
visibility: hidden;
color: blue;
font-family: sans-serif;
font-size: 20px;
}
.frmcntr:focus + .cancel {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<span class="cancel">Cancel</span>
<span class="btn">button here</span>
</div>
</body>
</html>

You can use the blur event for the input and the mousedown event as mousedown event fires before the blur event.
var mouseDown = false;
$('input').blur(function() {
if(mouseDown) // cancel the blur event
{
$('input').focus();
mouseDown = false;
}
});
$('#cancelBtn').mousedown(function(){
mouseDown = true;
console.log('Button Clicked');
});
$('input').focus(function(){
$('#cancelBtn').css('display', 'block');
});
$('input').focusout(function(){
$('#cancelBtn').css('display', 'none');
});
/* Styles go here */
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: green;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
#cancelBtn {
color:blue;
float:left;
font-weight:bold;
display:none;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div id="cancelBtn">Cancel</div>
</div>
</body>
</html>

footer button in Android Browser

I am new to CSS and developing a simple template which will be showed inside an Android Browser. Basically my template only has two elements, an error message, and a button (should be placed at footer).
I have read a few posts at stackoverflow. People suggest to use
position:fixed;
bottom: 0;
to place an element at footer. However, when I added this my button css, it seems my button was just placed right below the error message instead of at the footer. Anyone has any ideas why?
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>

Change position: relative; to position: fixed; from class .fulfill-application-button.ok
Code :
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
Note : You can give right and left for the same, if you want.

We Keep Coding

JavaScript is the programming language of the Web.

Html button works well, but css button doesn't - javascript

Not sure what a 'css-button' is, but why not just add your .button class to the button like so: <button class="button" type="button" id="myBtn" onclick="og_load();">Apply</button>

Related

Why the same button animation cannot use inside form?

JQuery onclick change z-index

close button isn't working on popup window

How to place a div beside input box on focus?

footer button in Android Browser

Categories

Resources