Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  <style>
    *{
        -moz-user-select: none; 
        -khtml-user-select: none; 
        -webkit-user-select: none; 
        -o-user-select: none; 
    }
    #popup{
      display:none;
      z-index: 9002;
      max-height:400px;
      overflow:hidden;
      position:absolute;
      top:10px;
      left:10px;
      border-radius:5px;
      border:1px solid white;
      background-color:white;
    }
    #popup_title{
      border-bottom:1px solid black;
      color:white;
      font-weight:bold;
      text-align:center;
      border-radius:5px 5px 0px 0px;
      background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    }
    #popup *{
      padding:5px;
    }
    #popup ul{
      list-style:none;
      padding:0px;
      margin:0px;
      width:200px;
      overflow:hidden;
    }
        #popup  li{
      padding:10px;
      border-bottom:1px solid silver;
    }
    #popup ul li{
      text-indent:10px;
    }
    #mask {
      background-color:rgba(0,0,0,0.5);
      position:absolute;
      z-index: 9001;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      display:none;
    }
  </style>
<body>
  <div id="mask">
    
    <div id="popup">
    
    </div>
  </div>
  <button onclick="list()">show list</button>
​
</body>
</html>
​
 
​
function show_list(title,list,callback) {
  var ul = document.createElement("ul");
  var popup = document.getElementById('popup');
  var maskDiv = document.getElementById('mask');
  while( popup.hasChildNodes() ){
    popup.removeChild(popup.lastChild);
  }
  popup.innerHTML = '<div id="popup_title">'+title+'</div>';
  for(var i = 0;i<list.length;i++){
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(list[i]));
    var value = list[i];
    li.onclick = function(value) { 
      popup.style.display="none";
      maskDiv.style.display = "none";
      callback(value.target.childNodes[0].nodeValue);
    };
    ul.appendChild(li);
  }
  popup.appendChild(ul);
  maskDiv.style.display = 'block';
  popup.style.display = 'block';
  popup.style.top = ((window.innerHeight/2) - (popup.offsetHeight/2))+'px';
  popup.style.left = ((window.innerWidth/2) - (popup.offsetWidth/2))+'px';
}
function list(){
  var items = ["option1","option2"];
  show_list('Select a option',items,function(value){
 alert(value);
  });  
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
syedimtypro
0viewers