js实现一个弹出层窗口效果代码-html代码-BFW代码库

代码语言：html
所属分类：弹出层
代码描述：js实现一个弹出层窗口效果代码，可弹出iframe 文字层
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<style>
body {
  overflow: overlay;
}
.toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.25em;
  background-color: #e4e4e4;
  border-top: 1px solid #666;
  display: flex;
  flex-direction: row;
  gap: 0.25em;
}
.toolbar .apps {
  flex: 1 1 auto;
  border-right: 1px solid #666;
  padding: 0.5em;
  margin-right: 0.5em;
}
.toolbar .apps img {
  cursor: pointer;
  width: 24px;
  height: 24px;
}
.toolbar .dock {
  flex: 4 1 auto;
  display: flex;
  flex-direction: row;
  gap: 0.25em;
  font-family: Arial, sans-serif;
}
.toolbar .dock .item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #e4e4e4;
  border: 1px solid #a6a6a6;
  padding: 0.5em;
  overflow-y: hidden;
}
.toolbar .dock .item:hover {
  cursor: pointer;
  background-color: #fff;
  box-shadow: 1px 1px 2px 1px #bfbfbf;
}
.toolbar .dock .item .title {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
.window {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  position: absolute;
  top: 2em;
  left: 2em;
  right: 2em;
  bottom: 8em;
  width: calc(100% - 4em);
  height: calc(100% - 10em);
  min-height: 12em;
  min-width: 12em;
  z-index: 25;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #0056b3;
  resize: both;
  font: normal normal 16px/24px Arial, sans-serif;
}
.window.dragging {
  box-shadow: 2px 2px 8px 1px #666;
}
.window .header,
.window .body,
.window .footer {
  display: flex;
}
.window .header,
.window .footer {
  padding: 1em;
}
.window .header {
  flex: 0 1 1em;
  flex-direction: row;
  position: relative;
  background-color: #0056b3;
  color: #fff;
  cursor: move;
  box-shadow: 0px 1px 3px 1px #666;
}
.window .header .title {
  flex: 1 0 auto;
  font-size: 1em;
  margin: 0;
  font-weight: 300;
  max-width: calc(100% - 1.5em);
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}
.window .header .buttons {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 0 0 0 1em;
  z-index: 2;
}
.window .header .buttons .close,
.window .header .buttons .fullscreen,
.window .header .buttons .minimize {
  flex: 0 0 0;
  cursor: pointer;
  opacity: 0.75;
}
.window .header .buttons .close:hover,
.window .header .buttons .fullscreen:hover,
.window .header .buttons .minimize:hover {
  opacity: 1;
}
.window .header .buttons .fullscreen {
  margin-top: 3px;
}
.window .header .buttons .minimize {
  margin-top: -1px;
}
.window .header .drag-target {
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  opacity: 0.5;
}
.window .body {
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: overlay;
}
.window .body p {
  display: border-box;
  padding-bottom: 1em;
  color: #666;
}
.window .footer {
  flex: 0 1 1em;
  flex-direction: row;
  justify-content: flex-end;
  background-color: #e4e4e4;
  border-top: 1px solid #666;
  font: normal normal 10px/14px Arial, sans-serif;
  box-shadow: inset 0px 0px 3px 1px #999;
}
.window .footer .status {
  flex: 1 1 auto;
}
.browser {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.browser .address-bar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 0.25em;
  border-bottom: 1px solid #666;
  background-color: #f2f2f2;
  padding: 0.25em;
}
.browser .address-bar input {
  flex: 1 1 auto;
  border: 1px solid #d3d3d3;
  padding: 0.5em;
  color: #666;
}
.browser .address-bar .working {
  margin-top: 3px;
}
.browser .address-bar .working.loading {
  animation: load 1.4s infinite linear;
}
.browser iframe {
  flex: 1 1 auto;
  height: 100%;
  margin: 0;
}
@-moz-keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>



</head>

<body >
  <div class="toolbar" id="wm">
  <div class="apps"></div>
  <div class="dock"></div>
</div>
<template id="myWin">
  <div class="window" role="dialog" aria-labeledby="title">
    <div class="header">
      <div class="title">My Window Panel Title</div>
      <div class="buttons">
        <div class="minimize" tabindex="0" aria-label="Minimize">&#x1F5D5;</div>
        <div class="fullscreen" tabindex="0" aria-label="Toggle full screen"></div>
        <div class="close" tabindex="0" aria-label="Close">&#10006;</div>
      </div>
    </div>
    <div class="body">
      <p>Use my header/panel title area to drag me around.  Use the resize corner on my lower right to change the size of me.  Use the expansion button to make me full screen or the close button to destroy me.</p>
      <p>Suspendisse id purus diam. Vestibulum laoreet eros lobortis, maximus enim non, bibendum nisi. Ut in tortor vulputate tortor dignissim interdum vitae vel velit. Vestibulum malesuada blandit tellus, eget euismod nisi tempus in. Nam commodo aliquam erat, at venenatis augue tempus eu. Phasellus malesuada dapibus orci, dictum pulvinar velit. Nulla pellentesque blandit justo nec luctus. Sed malesuada eu turpis id laoreet. Duis et nisl molestie, commodo ex vitae, venenatis lectus. Proin sodales, metus ac dapibus imperdiet, tortor ipsum efficitur tellus, ac imperdiet sapien risus at nulla.</p>
      <p>Nullam sem orci, aliquet ut odio ac, aliquam volutpat ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget sem hendrerit ligula ultrices viverra non ut dui. Praesent viverra metus in tellus varius tristique. Suspendisse potenti. Phasellus vehicula tempus lacinia. Cras iaculis aliquet sollicitudin. Nam vulputate pretium ipsum non sollicitudin. Phasellus sapien augue, dictum consequat porttitor vitae, faucibus at ante. Aenean ut dapibus justo. Morbi vitae luctus enim. Nam rhoncus mattis dolor, vitae varius nisl ullamcorper quis. Aenean vitae iaculis sapien. Duis neque magna, lobortis nec metus eu, bibendum dapibus lorem</p>
    </div>
    <div class="footer">
      <div class="status">Application status...</div>
    </div>
  </div>
</template>

  
      <script>
class Window {
  #id = '' // window id
  #el = null // window element
  #header = null // window's header element
  #app = null // window's opened application (body)
  #close = null // window's close button
  #fullscreen = null // window's fullscreen and restore button
  #minimize = null // window's minimize button
  #iconFullscreen = document.createElement('span') // fullscreen button icon
  #iconRestore = document.createElement('span') // restore button icon
  #dragImage = new Image()
  #dragTarget = null
  #dragOffset = { // mouse position offset on the header
    x: 0,
    y: 0
  }
  #bounds = null // getBoundingClientRect - temporary bounding box created during drag start
  #restoreBounds = null // bounding box created to save size and location for window restoration after expansion
  
  constructor (templateId, options = {}) {
    // generate an id for the window
    this.#id = Math.random().toString(36).substring(7)
    this.#dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
    
    // get our window template
    const tid = templateId || 'myWin'
    const template = document.querySelector(`#${tid}`)
    
    if (template) {
      // create our window and add it to the document body
      const body = document.querySelector('body')
      const win = (template.content.cloneNode(true)).querySelector('.window')
      this.#el = body.appendChild(win)
      // add id and make it draggable
      this.#el.id = this.id
      this.#el.draggable = true
      // set window size
      if (options?.width) this.#el.style.width = `${parseInt(options.width)}px`
      if (options?.height) this.#el.style.height = `${parseInt(options.height)}px`
      if (options?.x) this.#el.style.left = `${parseInt(options.x)}px`
      if (options?.y) this.#el.style.top = `${parseInt(options.y)}px`
      
      // get app/body
      this.#app = this.#el.querySelector('.body')
      if (options?.app?.view) {
        this.#app.innerHTML = ''
        this.#app.appendChild(options.app.view)
      }
      
      // get header element, title and buttons
      this.#header = this.#el.querySelector('.header')
      if (options?.title) this.#header.querySelector('.title').innerHTML = String(options.title)
      this.#fullscreen = this.#header.querySelector('.buttons > .fullscreen')
      this.#minimize = this.#header.querySelector('.buttons > .minimize')
      this.#close = this.#header.querySelector('.buttons > .close')
      
      // determine which buttons we need
      if (options?.buttons?.minimize === false) {
        this.#header.querySelector('.buttons').removeChild(this.#minimize)
      }
      if (options?.buttons?.fullscreen === false) {
        this.#header.querySelector('.buttons').removeChild(this.#fullscreen)
      } else {
        // fullscreen button icons for swapping between states
        this.#iconFullscreen.innerHTML = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABmJLR0QA/wD/AP+gvaeTAAAAzklEQVQ4jdWTMU6CQRBG3yig1NgoXIXSggNY2FEQDuA5lBPYewIgBDvPQkdv85tHwa5ZzZ+4FcGvmsn7MvMluwPnosiFeg88AR2gAWYRsSv4CHgFLhN/iYj330PWwB74SKa3iPgseB94TEvGwE1ETH5EUrfqvCa+Ole3ub8o2FdKUKOm1asOU+SaJH11WLnw30q9U68qvdfqbRtYqdPKIVN1mfvyibtAr2ZI8n17OwVogLGa679+bNM2ZMHxdh6SYQPsCj5ILN/Wc2XqE+oAPCViMMs54V4AAAAASUVORK5CYII=" width="17" height="17">'
        this.#iconRestore.innerHTML = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABmJLR0QA/wD/AP+gvaeTAAAAoklEQVQ4jc2SwQnCQBRE33rSCgIBz3aQg6ZERe3DNrQHD0FBUoMShOdlA2E1giKYue2b4fP/sDBoqSs1T1iuLj8ZUqtlwkq1fpUffbVq3xB1q1ZqBWRAk2QbIGsz6qY1QmfIFJjF5xU4hBDs+AGYA5OIjiGEyy8uGZj6OrkB+xedLIBxRM+dqJtO83e1SPwi8jazfrvefz9boh1wStg58gHrAZ5zgE3VnSEzAAAAAElFTkSuQmCC" width="17" height="17">'
        this.#fullscreen.appendChild(this.#iconFullscreen)
      }
      if (options?.buttons?.close === false) {
        this.#header.querySelector('.buttons').removeChild(this.#close)
      }

      // add event listeners to the window for dragging
      this.#el.addEventListener('mousedown', this.setTarget.bind(this))
      this.#el.addEventListener('touchstart', this.setTarget.bind(this))
      this.#el.addEventListener('dragstart', this.dragStartHandler.bind(this))
      this.#el.addEventListener('dragover', this.dragOverHandler.bind(this))
      this.#el.addEventListener('touchmove', this.dragOverHandler.bind(this))
      this.#el.addEventListener('dragend', this.dragEndHandler.bind(this))
      this.#el.addEventListener('touchend', this.dragEndHandler.bind(this))
      
      // window button event listeners
      this.#minimize.addEventListener('click', this.minimizeHandler.bind(this))
      this.#close.addEventListener('click', this.closeHandler.bind(this))
      this.#fullscreen.addEventListener('click', this.fullscreenHandler.bind(this))
    } // if(template)
  } // constructor
  
  // Methods ==========================================================//
  
  // Get & Set ........................................................//
  
  get id () {
    return this.#id
  } // get id
  
  get zindex () {
    return this.#el.style.zIndex
  } // get zindex
  
  get title () {
    return this.#header.querySelector('.title').innerHTML
  } // title
  
  set zindex (val = 0) {
     this.#el.style.zIndex = val
  } // set zindex
  
  set title (val = 'Window Title') {
    this.#header.querySelector('.title').innerHTML = val
  } // set title
  
  set visibility (val = 'visible') {
    this.#el.style.visibility = val
  } // set visibility
  
  // Drag Handlers ....................................................//
  
  /**
   * Set Target
   * @description Saves event target during initial mousedown before drag
   * start happens.
   * @param evt Event
   */
  setTarget (evt) {
    this.#dragTarget = evt.target
    this.#bounds = this.#el.getBoundingClientRect()
    this.#dragOffset.x = (evt.type === 'touchstart') ? (evt.touches[0].clientX - this.#bounds.left) : (evt.clientX - this.#bounds.left)
    this.#dragOffset.y = (evt.type === 'touchstart') ? (evt.touches[0].clientY - this.#bounds.top) : (evt.clientY - this.#bounds.top)
    
    // dispatch an event notifying that a window was clicked upon
    const event = new CustomEvent("win-activate", { 'detail': { win: this.#id, z: this.#el.style.zIndex } })
    document.dispatchEvent(event)
  } // setTarget
  
  /**
   * Drag Start Handler
   * @description Handles the drag start event, if we've grabbed the window
   * by the header then allow dragging to occur.
   * @param evt Event
   */
  dragStartHandler (evt) {
    if (this.#header.contains(this.#dragTarget)) {
      evt.dataTransfer.setData('id', this.#id)
.........完整代码请登录后点击上方下载按钮下载查看