How to make the code that is workable three pop-up boxes for one pop-up box only?
Question
I'm following code which is showing the pop-up boxes at the bottom of screen when user clicks on a name of user (the user list is appearing on top right side of your screen.)
<!doctype html>
<html>
<head>
<title>Facebook Style Popup Design</title>
<style>
@media only screen and (max-width : 540px)
{
.chat-sidebar
{
display: none !important;
}
.chat-popup
{
display: none !important;
}
}
body
{
background-color: #e9eaed;
}
.chat-sidebar
{
width: 200px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
}
.sidebar-name
{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 4px;
font-size: 12px;
}
.sidebar-name span
{
padding-left: 5px;
}
.sidebar-name a
{
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
.sidebar-name:hover
{
background-color:#e1e2e5;
}
.sidebar-name img
{
width: 32px;
height: 32px;
vertical-align:middle;
}
.popup-box
{
display: none;
position: fixed;
bottom: 0px;
right: 220px;
height: 285px;
background-color: rgb(237, 239, 244);
width: 300px;
border: 1px solid rgba(29, 49, 91, .3);
}
.popup-box .popup-head
{
background-color: #6d84b4;
padding: 5px;
color: white;
font-weight: bold;
font-size: 14px;
clear: both;
}
.popup-box .popup-head .popup-head-left
{
float: left;
}
.popup-box .popup-head .popup-head-right
{
float: right;
opacity: 0.5;
}
.popup-box .popup-head .popup-head-right a
{
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages
{
height: 100%;
overflow-y: scroll;
}
#carbonads {
max-width: 300px;
background: #f8f8f8;
}
.carbon-text {
display: block;
width: 130px;
}
.carbon-poweredby {
float: right;
}
.carbon-text {
padding: 8px 0;
}
#carbonads {
padding: 15px;
border: 1px solid #ccc;
}
.carbon-text {
font-size: 12px;
color: #333333;
text-decoration: none;
}
.carbon-poweredby {
font-size: 75%;
text-decoration: none;
}
#carbonads {
position: fixed;
top: 5px;
left: 5px;
}
</style>
<script>
//this function can remove a array element.
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};
//this variable represents the total number of popups can be displayed according to the viewport width
var total_popups = 0;
//arrays of popups ids
var popups = [];
//this is used to close a popup
function close_popup(id)
{
for(var iii = 0; iii < popups.length; iii++)
{
if(id == popups[iii])
{
Array.remove(popups, iii);
document.getElementById(id).style.display = "none";
calculate_popups();
return;
}
}
}
//displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
function display_popups()
{
var right = 220;
var iii = 0;
for(iii; iii < total_popups; iii++)
{
if(popups[iii] != undefined)
{
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for(var jjj = iii; jjj < popups.length; jjj++)
{
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
//creates markup for a new popup. Adds the id to popups array.
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">✕</a></div>';
element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups()
{
var width = window.innerWidth;
if(width < 540)
{
total_popups = 0;
}
else
{
width = width - 200;
//320 is width of a single popup box
total_popups = parseInt(width/320);
}
display_popups();
}
//recalculate when window is loaded and also when window is resized.
window.addEventListener("resize", calculate_popups);
window.addEventListener("load", calculate_popups);
</script>
</head>
<body>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=qnimate" id="_carbonads_js"></script>
<div class="chat-sidebar">
<div class="sidebar-name">
<!-- Pass username and display name to register popup -->
<a href="javascript:register_popup('narayan-prusty', 'Narayan Prusty');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>Narayan Prusty</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qnimate', 'QNimate');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QNimate</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qscutter', 'QScutter');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QScutter</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qidea', 'QIdea');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QIdea</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qazy', 'QAzy');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QAzy</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qblock', 'QBlock');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QBlock</span>
</a>
</div>
</div>
</body>
</html>
Now my issue is I want to display one name and only one pop-up box for that name at right bottom corner. And the pop-up box should close if user clicks anywhere except the pop-up box.
How should I achieve this?
NB : I've not created a jsfiddle since I'm not aware of how to make it but if you just create one HTML file on your machine and copy-paste my code you will be able to run the code in your browser.
1 answers
solution1
0 2014-12-31 11:00:06
Bind the following events with the popup.
$(':selector').bind({
mouseover : function(){
mouseIn = 1;
},
mouseout : function(){
mouseIn = 0;
},
click : function(){
mouseIn = 1;
}
});
$(document).click(function(){
if($(":selector").is(":focus")){
mouseIn == 1;
};
if(mouseIn == 0){
$(':selector').slideUp();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
javascript pop-up box
Pop-up box not opening
how to make a pop-up window in sugarcrm?
How to make pop-up for error bootstrap?
Make marker pop-up
Idea to have a pop-up box of radio boxes on a form
How to handle modal or Pop-up Boxes in Selenium Python
Pop-up sequence
OpenLayers 3 Pop-up?
Javascript pop-up
Related Tags