设计一个弹窗模块

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

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)
      }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,205评论 4 61
  • 不要着急,最好的总会在最不经意的时候出现。纵使伤心,也不要愁眉不展,因为你不知道谁会爱上你的笑容。对于世界而言,你...
    良品小屋阅读 4,278评论 0 1
  • 一 王总说,钱不是问题,重点是这菜做的味道不好,太甜了。厨师也就这水平,还没我的高。 王总说,来,各位兄弟,祝大家...
    A明知阅读 4,622评论 0 0
  • 在唐代就有了“药茶治百病”之说,时下感冒流行,出现了很多防治感冒的药茶方,针对当下流行性感冒、伤风性感冒等各种症状...
    中药世家阅读 3,523评论 0 2
  • 1: \d,\w,\s,a-zA-Z0-9,\b,.,*,+,?,x{3},^,$分别是什么? \d: 数字0-9...
    饥人谷_Leon阅读 1,586评论 0 0