JavaScript singleton mode to implement custom pop-up box

JavaScript singleton mode to implement custom pop-up box

This article shares the specific code of JavaScript singleton mode to implement custom pop-up boxes for your reference. The specific content is as follows

Function

  • Customize pop-up title
  • Customize pop-up content
  • Customize the callback function for confirming and closing the pop-up window

Complete code

const Dialog = (function () {
 class Dialog {
   constructor () {
     this.ele = document.createElement('div')
     this.ele.className = 'dialog'
     document.body.appendChild(this.ele)
     this.callback = null
     this.setEvent()
   }
 
   setContent ({ text, topicText, confirmText, cancelText } = options) {
     this.ele.innerHTML = null
     const top = document.createElement('div')
     top.className = 'top'
     const topic = document.createElement('span')
     topic.className = 'topic'
     topic.innerHTML = topicText
     const close = document.createElement('span')
     close.className = 'close'
     close.innerHTML = '×'
     top.appendChild(topic)
     top.appendChild(close)
     const middle = document.createElement('div')
     middle.className = 'middle'
     const content = document.createElement('div')
     content.className = 'content'
     content.innerHTML = text
     middle.appendChild(content)
     const bottom = document.createElement('div')
     bottom.className = 'bottom'
     const confirm = document.createElement('button')
     confirm.className = 'confirm'
     confirm.innerHTML = confirmText
     const cancel = document.createElement('button')
     cancel.className = 'cancel'
     cancel.innerHTML = cancelText
     bottom.appendChild(confirm)
     bottom.appendChild(cancel)
     const wrap = document.createElement('div')
     this.ele.appendChild(top)
     this.ele.appendChild(middle)
     this.ele.appendChild(bottom)
     this.ele.style.display = 'block'
   }
 
   setEvent () {
     this.ele.addEventListener('click', e => {
       e = e || window.event
       const target = e.target || e.srcElement
       if (target.className === 'close') {
         this.ele.style.display = 'none'
         console.log('close')
       }
       if (target.className === 'confirm') {
         this.ele.style.display = 'none'
         this.callback(true)
       }
       if (target.className === 'cancel') {
         this.ele.style.display = 'none'
         this.callback(false)
       }
     })
   }
 }
 let instance = null
 return function (options, cb) {
   if (!instance) instance = new Dialog()
   instance.setContent(options)
   instance.callback = cb || function () {}
   return instance
 }
 })()
 
 const dialog = new Dialog({
 text: 'prompt text',
 topicText: 'Title',
 confirmText: 'Confirm',
 cancelText: 'Cancel'
 }, res => { console.log(res) })

Rendering

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js+html5 realizes the effect of semi-transparent mask layer pop-up box
  • Toast usage in vue.js and example code using toast pop-up box
  • Encapsulation of js custom pop-up box plug-in
  • Easily implement js pop-up box display options
  • Vue.js implements pop-up window only once
  • js to achieve the effect of up, down, left, and right pop-up boxes
  • Implement the delivery address pop-up box selection based on layer.js and return the corresponding address information
  • JavaScript to achieve a pop-up box that cannot be closed
  • Example code of Bootstrap and Angularjs with homemade pop-up box
  • js rewrites the alert event (avoiding the URL appearing in the alert pop-up box title)

<<:  Sharing experience on MySQL slave maintenance

>>:  Proxy_pass method in multiple if in nginx location

Recommend

MySQL 5.7.17 winx64 installation and configuration method graphic tutorial

Windows installation mysql-5.7.17-winx64.zip meth...

JavaScript to implement the countdown for sending SMS

This article shares the specific code of JavaScri...

MySQL tutorial data definition language DDL example detailed explanation

Table of contents 1. Introduction to the basic fu...

How to configure Hexo and GitHub to bind a custom domain name under Windows 10

Hexo binds a custom domain name to GitHub under W...

Install redis and MySQL on CentOS

1|0MySQL (MariaDB) 1|11. Description MariaDB data...

Example of implementing colored progress bar animation using CSS3

Brief Tutorial This is a CSS3 color progress bar ...

mysql error number 1129 solution

SQLyog connects to mysql error number 1129: mysql...

Detailed tutorial on MySQL installation and configuration

Table of contents Installation-free version of My...

Solve MySQL deadlock routine by updating different indexes

The previous articles introduced how to debug loc...

Detailed explanation of desktop application using Vue3 and Electron

Table of contents Vue CLI builds a Vue project Vu...

How to use TypeScript in Vue

introduction In recent years, the call for TypeSc...

Detailed explanation of the update command for software (library) under Linux

When installing packages on an Ubuntu server, you...