美文网首页
设计一个弹窗模块

设计一个弹窗模块

作者: bigtom | 来源:发表于2016-08-22 11:44 被阅读65次

传入一个对象作为参数,用于设定弹窗的尺寸样式,设定弹窗的内容文本,并可以给弹窗设定按钮和回调函数。

function createPop(options){
      var pop = document.createElement('div')
      var width = options.width || 400;
      var height = options.height || 300;
      pop.style.position = 'fixed'
      pop.style.width = width + 'px'
      pop.style.height = height + 'px';
      pop.style.border = '1px solid #666';
      pop.style.left = "50%"
      pop.style.marginLeft = -width/2 + 'px'
      pop.style.top = "50%"
      pop.style.marginTop = -height/2 + 'px'
      var body = document.getElementsByTagName('body')[0]
      body.appendChild(pop)

      var close = document.createElement('div')
      close.innerHTML = 'X'
      close.style.position = 'absolute'
      close.style.width = '30px'
      close.style.height = '30px'
      close.style.right = '20px'
      close.style.top = '10px'
      close.style.border = "1px solid #444"
      close.style.textAlign = "center"
      close.style.lineHeight = "30px"
      pop.appendChild(close)
      close.onclick = function(){
        pop.remove()
      }

      var msgcontent = options.msg || 'welcome to use pop'
      var msg = document.createElement('div')
      msg.style.position = "absolute"
      msg.style.fontSize = "20px"
      msg.style.top = "50px"
      msg.style.margin = '0 30px 30px 30px'
      msg.innerHTML = msgcontent
      pop.appendChild(msg)


      body.addEventListener('close',function(){
        pop.remove()
      })

      if (options.commit){
        var commit = document.createElement('button')
        commit.style.height = "30px"
        commit.innerHTML = "commit"
        commit.style.fontSize = "20px"
        commit.style.position = 'absolute'
        commit.style.right = '30px'
        commit.style.bottom = "50px"
        commit.onclick = options.commit

        pop.appendChild(commit)
      }
    }

相关文章

网友评论

      本文标题:设计一个弹窗模块

      本文链接:https://www.haomeiwen.com/subject/zlwwsttx.html