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">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="wrapper" class="wrapper">
  <button id='btn'>点击</button>
  <div id='popover' class="popover">浮层</div>
</div>
</body>
</html>
 
.wrapper{
  /* border: 1px solid red; */
  position: relative;
  display:inline-block;
}
.popover{
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  border: 1px solid red;
  padding: 10px;
  margin-left: 10px;
}
/* 三角形*/
.popover::before{
  content: '';
  position: absolute;
  top: 5px;
  right: 100%;
  border: 10px solid transparent;
  border-right-color: red;
} 
.popover::after{
  content: '';
  position: absolute;
  top: 5px;
  right: 100%;
  border: 10px solid transparent;
  border-right-color: #fff;
  margin-right: -1px;
}
 
$(btn).on('click',function () {
  console.log('点击btn')
  $(popover).show()
  $(document).one('click',function () { 
      console.log('点击document')
      $(popover).hide()
  })
})
$(wrapper).on('click',function (e) {
  console.log('点击wrapper')  
  e.stopPropagation()
})
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers