Below is code that once hovered over the shape words will appear behind. Having two problems here:
1. If I make the font small (24px), the dark grey will not cover the whole shape.
2. I want to include words with the hover, e.g. I want it to display information on the shape before hovering, then fade away with the shape to show the new info behind it. Like a name fading away to give a bio.
I used w2schools to compile this: https://www.w3schools.com/code/tryit.asp?filename=FT2LEOI9SQQN
<html>
<div id="box">
<div id="overlay">
<span id="plus">Hello<br>Hi</span>
</div>
</div>
<style>
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, 0.75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, 0.85);
font-size: 24px;
}
</style>
</html>
Kindly have a look over the modified Code, It's now covering the whole Div.
I am a bit fuzzy about your second point, hope will solve it also.
I have tested the code, You can test also, next time be careful to use your own Editor for better output.
If the Code Solve your problem, then Vote Up to Acknowledge our effort.
Thank You.
Best Wishes,
<html>
<head>
<title>
</title>
<style>
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 177px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, 0.75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, 0.85);
font-size: 24px;
}
</style>
</head>
<div id="box">
<div id="overlay">
<span id="plus">Hello<br>Hi</span>
</div>
</div>
</html>
Related
I am a Software Developer and working on creating a front End dashboard. I am supposed to create all this without using any plugins. Just pure JQuery and JavaScript and styling. I am developing a radial Gauge from scratch without plugins. I need to add the following to my gauge. Please help me with it.
Tick Marks showing Min Value and Max Value from 0 to 100.
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(0deg);
transition:8s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(180deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
<span id="spacing"></span>
</div>
</body>
</html>
Maybe you can try to modify your current needle as a tick?
Hi there I'm currently making a simple cookie bar however, I'm having issues testing this locally. So far I've tested this in JS.Fiddle here and seems to works as I would like it to.
I have checked and also have jquery-2.2.4.min.js added to the file in order for this to work.
Here is what I'm working with.
var clearCookie = function () {
var result = $.removeCookie('JSFiddleCookieNotification');
if (result) {
alert('Cookie removed, please reload.');
} else {
alert('Error: Cookie not deleted');
}
}
var closeCookie = function () {
$("#notification").toggle("slide", {
direction: "down"
});
$.cookie('JSFiddleCookieNotification', 'Notified', {
expires: 7
});
}
// Bind the buttons
$("#clearCookie").on("click", clearCookie);
$("#closeCookie").on("click", closeCookie);
// Now display the cookie if we need to
if ($.cookie('JSFiddleCookieNotification') == null) {
$("#notification").effect({
effect: "slide",
direction: "down",
duration: 600
});
}
.hidden {
display:none;
}
.cookie {
bottom: -20px;
}
.cookie-wrapper {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
padding: 15px 45px 30px 15px;
text-align: left;
position: fixed;
left: 0;
/*background: rgba(18, 108, 177, 0.901961);*/
background: #de291e;
color: #fff;
width: 100%;
}
.btn {
display: inline-block;
float: right;
width: 15%;
text-decoration: none;
margin-bottom: 0px;
margin-right: 30px;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
background-image: -o-linear-gradient(top, #fff, #e6e6e6);
background-image: linear-gradient(to bottom, #fff, #e6e6e6);
background-image: repeat-x;
border: 1px solid #ccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*margin-left: 3em;
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);
outline:none !important;
padding: 1px 7px !important;
}
.btn:hover, .btn:focus {
color: #333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.btn:hover, .btn:focus, .btn:active, .active.btn, .disabled.btn, [disabled].btn {
background-color: #e6e6e6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="header">
<h2>Cookie Notification demo</h2>
</div>
<div id="contentArea">
<input id="clearCookie" type="button" value="Delete Cookie" />
</div>
<div id="notification" class="cookie-wrapper cookie hidden">
<p>This site uses cookies! <a id="closeCookie" class="btn" href="#">Close</a>
</p>
</div>
According to cookie specs, only domains specified with two or three periods can be used to set the cookie.
That means, that it won't work on localhost.
For example example.com and subdomain.example.com will work, because they fulfill requirements according to cookie specs, while localhost doesn't.
Try with workaround by masking your local environment by setting some domain name in hosts file.
See:
https://curl.haxx.se/rfc/cookie_spec.html (under 'domain')
I was trying to set border colour white of my tooltip's arrow key. I was able to set tooltips bottom border colour white, how can I set bottom border colour of arrow too? Here is what I tried:
.hint {
position: relative;
display: inline-block;
}
.hint:before,
.hint:after {
position: absolute;
opacity: 0;
z-index: 100;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
pointer-events: none;
}
.hint:hover:before,
.hint:hover:after {
opacity: 1;
}
.hint:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
position: absolute;
transform: translateX(-50%);
}
.hint:after {
content: attr(data-hint);
background: rgba(0, 0, 0, 0.8);
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
padding: 8px 10px;
font-size: 16px;
font-style: italic;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
}
/* top mouse-icon*/
.hint--top:before {
bottom: 100%;
left: 50%;
margin: 0 0 -18px 0;
border-top-color: rgba(0, 0, 0, 0.8);
}
.hint--top:after {
bottom: 100%;
left: 50%;
margin: 0 0 -6px -10px;
}
/*arrow key*/
.hint--top:hover:before {
margin-bottom: -12px;
border-width: 12px;
/*margin-left: -56px;*/
border-color: rgba(194, 225, 245, 0);
border-top-color: rgba(0, 0, 0, 0.8);
}
.hint--top:hover:after {
margin-bottom: 12px;
border-width: 10px;
/*margin-left: -50px;*/
border-top-color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #f0f0f0;
}
<br /><br /><br /><br />
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
<a>Assalaamu 'Alaikum</a>
</div>
For clarification, I am including sample picture here. Right now I have this:
But I need something like the given image below:
I had struggled to draw triangle before, too. Almost tricks such as here and here dealing with triangles in HTML handles border. So painting borders of triangles is impossible with this kind of tricks.
One alternative is to rotate a square and hide a half. The advantage of this method is that drawing border is easy, but I didn't find super clean method to hide half of the square. So when the tooltip or the triangle have opacity less than 1, this is not a desirable method.
Maybe this is what you want. Jsfiddle.net demo is here.
.hint {
position: relative;
display: inline-block;
margin-top: 40px;
}
.hint:before,
.hint:after {
position: absolute;
opacity: 0;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
pointer-events: none;
}
.hint:hover:before,
.hint:hover:after {
opacity: 1;
}
.hint:before {
content: '';
position: absolute;
background: rgba(0, 0, 0, 1);
width: 6px;
height: 6px;
transform: translateX(-50%) rotate(45deg);
z-index: 2;
}
.hint:after {
content: attr(data-hint);
background: rgba(0, 0, 0, 1);
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
padding: 8px 10px;
font-size: 16px;
font-style: italic;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
z-index: 1;
}
/* top mouse-icon*/
.hint--top:before {
bottom: 100%;
left: 50%;
margin: 0 0 -12px 0;
}
.hint--top:after {
bottom: 100%;
left: 50%;
margin: 0 0 -6px -10px;
}
/*arrow key*/
.hint--top:hover:before {
margin-bottom: 0px;
/* border-width: 2px; */
width: 24px;
height: 24px;
/* margin-left: -56px; */
border: solid white;
border-width: 0 1px 1px 0;
border-top-left-radius: 100%;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
/* border-top-color: rgba(0, 0, 0, 0.8); */
}
.hint--top:hover:after {
margin-bottom: 12px;
border-width: 10px;
/*margin-left: -50px;*/
border-top-color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #f0f0f0;
}
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
<a>Assalaamu 'Alaikum</a>
</div>
First of all your html is very strange. Adding class attribute twice on an element is pointless. Also the br are not good practice for making space.. Use margins instead or something else.
For your problem, you need another triangle with red border positioned under your black triangle. This red triangle should be bigger.
Then, the small black triangle should have a z-index bigger than your tooltip so it will cover the red border of the tooltip
I added all the new code at the beginning of the snippet. See below
You need to change a little bit the animation. But it should be easy
.border-triangle {
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
position: absolute;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
opacity: 0;
transition: 0.3s ease-out;
border-top: 20px solid red;
}
.hint:hover .border-triangle {
opacity: 1;
}
.hint {
position: relative;
display: inline-block;
}
.hint:before,
.hint:after {
position: absolute;
opacity: 0;
z-index: 100;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
pointer-events: none;
}
.hint:hover:before,
.hint:hover:after {
opacity: 1;
}
.hint:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
position: absolute;
transform: translateX(-50%);
}
.hint:after {
content: attr(data-hint);
background: rgba(0, 0, 0, 1);
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
padding: 8px 10px;
font-size: 16px;
font-style: italic;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
}
/* top mouse-icon*/
.hint--top:before {
bottom: 100%;
left: 50%;
margin: 0 0 -18px 0;
border-top-color: rgba(0, 0, 0, 0.8);
}
.hint--top:after {
bottom: 100%;
left: 50%;
margin: 0 0 -6px -10px;
z-index: 1;
}
/*arrow key*/
.hint--top:hover:before {
margin-bottom: -10px;
border-width: 12px;
/*margin-left: -56px;*/
border-color: rgba(194, 225, 245, 0);
border-top-color: rgba(0, 0, 0, 1);
z-index: 2;
}
.hint--top:hover:after {
margin-bottom: 12px;
border-width: 10px;
/*margin-left: -50px;*/
border-top-color: rgba(0, 0, 0, 0.8);
border-bottom: 2px solid red;
}
<br>
<br>
<br>
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub"> <!-- intro-sub second class is usless -->
<div class="border-triangle">
</div>
<a>Assalaamu 'Alaikum</a>
</div>
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.
I have following html structure :
<div id="content">
<!-- data -->
<div id="popup"></div>
<!-- data -->
</div>
I am displaying my popup on page load , but at the same time I want to disable background area . My popup box is appearing on z-index , and rest background area should be non-accessible at this time .
How can I achieve this ?
I am using this css style :
#popup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 rgb(36, 35, 35);
border: 5px solid rgb(5, 5, 5);
border-radius: 3px 3px 3px 3px;
color: #333333;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 250px;
height: 150px;
width: 600px;
z-index: 2;
padding: 50px;
}
You will need a div to cover the entire window.
This will not be enough though since a user might still use the keyboard to navigate in the background. You would have to iterate all the a/input/button/select elements on the page and add an tab-index attribute set to -1. When you hide the pop-up they should remove the 'tab-index' attribute.
The reason for the tab-index manipulation is also one of accessibility. A user that navigates through the keyboard will have a hard time navigating content inside of your pop-up if you let them navigate in the background.
So, how would we go about constructing this? Just to set you off:
Html:
<div id="popup" class="popup">
<div class="cover"></div>
<div class="popupBody">
...
</div>
</div>
Css:
.popup {
background-color:black;display:none;
position:fixed;
left:0;right:0;top:0;bottom:0;
z-index:3000;
opacity:0.5;
}
js+ jQuery for adding tabindex:
$('input, a, button, select').each(function () {
$(this).attr('tabindex', '-1');
});
Note: Here the popup is the 'cover', with popupBody being the actual popup, uggly but working jsfiddle: http://jsfiddle.net/mjfag/1
An alternative would be to use the JQuery UI module for modal dialogues. That does nothing for the keyboard-navigation though but if that is of no concern all the other stuff is already done for you.
Edit: After some quick testing with a newer version of jQuery UI it seems like they've started handling the keyboard to.
try this
<div class="modalpopup">
<div class="modal-backdrop fade in">//for background disable
</div>
<div
class="modal hide fade in" id="myModal" style="display: block;">
<div class="modal-header">
<h3 id="myModalLabel">
Modal Heading</h3>
</div>
<div class="modal-body">
<h4>
Popover in a modal</h4>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
</div>
<style>
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: 1050;
width: 560px;
margin-left: -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
top: 10%;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
position: relative;
max-height: 400px;
padding: 15px;
overflow-y: auto;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.modal-footer:before,
.modal-footer:after {
display: table;
line-height: 0;
content: "";
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
</style>
You need to completely cover the div: #content with some other div.
Here's the Complete HTML Code :
<html>
<head>
<title>Pop Up Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#main {
width: 100%;
height: 100%;
background-color: #EFEFEF;
padding: 50px;
font-size: 14px;
font-weight: bold;
}
#enclosePopUp {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 1;
filter: alpha(opacity = 100);
display: none;
z-index: 2;
}
#popup {
position: absolute;
_position: absolute; /* hack for internet explorer 6 */
height: 45px;
width: 295px;
background: #FFFFFF;
left: 500px;
top: 250px;
text-align: center;
border: 2px solid #BDBDBD;
padding: 15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #D8D8D8;
-webkit-box-shadow: 0 0 5px #D8D8D8;
box-shadow: 0 0 5px #D8D8D8;
}
#disabledLink {
display: none;
}
</style>
<script type="text/javascript">
function loadPopUp() {
$('#enclosePopUp').fadeIn("slow", function() {
$("#main").css({
"opacity" : "0.3",
"z-index" : "1"
});
$("#disabledLink").show();
});
}
function unLoadPopUp() {
$('#enclosePopUp').fadeOut("slow", function() {
$("#main").css({
"opacity" : "1"
});
$("#disabledLink").hide();
});
}
</script>
</head>
<body>
<div id="main">
Click here to show PopUp
<br> <a id="disabledLink" href="http://www.google.com">Google.com</a>
</div>
<div id='enclosePopUp'>
<div id="popup">
This is a pop up with disabled background. <br> <a href="#"
onclick="return unLoadPopUp();">Close</a>
</div>
</div>
</body>
</html>