js制作提示框插件


Posted in Javascript onDecember 24, 2020

JavaScript制作一个简单的提示框插件

下面是制作的提示框插件文件

window.myPlugin = window.myPlugin || {};

window.myPlugin.showMsg = (function () {
  var mongolia, //蒙层
    promptBox, //提示框
    closeSpan, //关闭按钮
    titleSpan, //提示标题
    contextSpan, //提示信息
    okBtn, //确定按钮
    cancelBtn, //取消按钮
    isRegEvent, //是否注册事件
    option; //传入的参数



  /**
   * 初始化蒙层
   */
  function initMongolia() {
    if (!mongolia) { //没有蒙层则初始化
      //蒙层:覆盖整个窗口,半透明的黑色
      mongolia = document.createElement("div");
      mongolia.style.position = "fixed";
      mongolia.style.width = mongolia.style.height = "100%";
      mongolia.style.left = mongolia.style.top = 0;
      mongolia.style.background = "rgba(0,0,0,.5)";
      document.body.appendChild(mongolia);
    }
    mongolia.style.display = "block"; //展示蒙层
  }

  /**
   * 初始化提示框
   */
  function initPromptBox() {
    //提示框:宽高300,位置居中
    if (!promptBox) {
      promptBox = document.createElement("div");
      promptBox.style.width = promptBox.style.height = "300px";
      promptBox.style.background = "#fff";
      promptBox.style.fontSize = "14px";
      promptBox.style.position = "absolute";
      promptBox.style.top = promptBox.style.left = "50%";
      promptBox.style.marginLeft = promptBox.style.marginTop = "-150px";
      promptBox.style["data-myplugin-id"] = "promptBox";
      initPromptContext();
      mongolia.appendChild(promptBox);
      titleSpan = document.querySelector("[data-myplugin-id='title']"); //提示标题
      contextSpan = document.querySelector("[data-myplugin-id='message']"); //提示信息
      closeSpan = document.querySelector("[data-myplugin-id='close']"); //关闭按钮
      okBtn = document.querySelector("[data-myplugin-id='ok']"); //确定按钮
      cancelBtn = document.querySelector("[data-myplugin-id='cancel']"); //取消按钮
    }

    okBtn.innerText = option.okText || "确定";
    cancelBtn.innerText = option.cancelText || "取消";
    titleSpan.innerText = option.title || "提示";
    contextSpan.innerText = option.context || "";
  }

  /**
   * 初始化提示框中的内容
   */
  function initPromptContext() {
    //内容包含:标题,关闭按钮,提示信息,确定按钮,取消按钮

    //创建标题,关闭按钮
    var div = document.createElement("div");
    div.innerHTML = `<span style="float:left;" data-myplugin-id="title"></span>
    <span style="float:right;cursor:pointer;" data-myplugin-id="close">X</span>`;
    div.style.height = "50px";
    div.style.padding = "10px 20px";
    div.style.background = "#eee";
    div.style.boxSizing = "border-box";
    promptBox.appendChild(div);

    //创建提示信息
    div = document.createElement("div");
    div.innerHTML = `<span data-myplugin-id="message"></span>`;
    div.style.height = "200px";
    div.style.padding = "10px 20px";
    div.style.boxSizing = "border-box";
    promptBox.appendChild(div);

    //创建确定按钮,取消按钮
    div = document.createElement("div");
    div.innerHTML = `<button style="float:right;margin:10px;cursor:pointer;" data-myplugin-id="cancel"></button><button style="float:right;margin:10px;cursor:pointer;" data-myplugin-id="ok"></button>`;
    div.style.height = "50px";
    div.style.padding = "10px 20px";
    div.style.boxSizing = "border-box";
    promptBox.appendChild(div);
  }

  //注册事件
  function regEvent() {
    if (!isRegEvent) { //未注册事件
      //1.点击关闭,点击蒙层,点击取消按钮
      closeSpan.onclick = mongolia.onclick = function () {
        mongolia.style.display = "none"; //隐藏蒙层
      };

      okBtn.onclick = function () {
        option && option.okFunction && option.okFunction();
        mongolia.style.display = "none"; //隐藏蒙层
      }

      cancelBtn.onclick = function () {
        option && option.cancelFunction && option.cancelFunction();
        mongolia.style.display = "none"; //隐藏蒙层
      }

      //2.拖动提示框事件
      window.onmousedown = function (e) {
        var target = getTarget(e.target); //是否包含目标元素

        if (target) {
          var style = window.getComputedStyle(target);
          var left = parseInt(style.left);
          var top = parseInt(style.top);
          var disX = parseInt(e.pageX) - left;
          var disY = parseInt(e.pageY) - top;

          window.onmousemove = function (e) {
            var newLeft = parseInt(e.pageX) - disX;
            var newTop = parseInt(e.pageY) - disY;

            promptBox.style.left = newLeft + "px";
            promptBox.style.top = newTop + "px";

          };
          window.onmouseup = window.onmouseleave = function () {
            window.onmousemove = null;
          }
        }
      };

      function getTarget(target) {
        while (target) {
          if (target.tagName === "DIV" && target.style["data-myplugin-id"] === "promptBox") {
            return target;
          } else {
            target = target.parentElement;
          }
        }
        return false;
      }
    }
  }




  /**
   * @param {object} opts 
   * opts.title : 提示标题
   * opts.context : 提示信息
   * opts.cancelText:取消按钮内容
   * opts.okText:确定按钮内容
   * opts.cancelText:取消按钮内容
   * opts.okFunction:确定按钮的回调函数
   * opts.cancelFunction:取消按钮的回调函数
   */
  function showMsg(opts) {
    if (typeof opts === "string") {
      option = {
        context: opts
      }
    } else {
      option = opts || {};
    }
    initMongolia();
    initPromptBox();
    regEvent();
  }

  return showMsg;
}());

myPlugin.js

引入并使用myPlugin.js文件

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./js/myPlugin.js"></script>
  <script>
    window.myPlugin.showMsg({
      title: "信息",
      context: "确定删除吗",
      okText: "OK",
      cancelText: "Cancel",
      okFunction: function(){
        console.log("点击OK按钮");
      },
      cancelFunction:function(){
        console.log("点击Cancel按钮");
      }
    });
  </script>
</body>

</html>

index.html

效果展示:

js制作提示框插件

以上就是js制作提示框插件的详细内容,更多关于js 制作提示框的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
在HTML中使用JavaScript的两种方法
Dec 24 #Javascript
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
You might like
php结合md5实现的加密解密方法
2016/01/25 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
javascript之函数直接量(function(){})()
2007/06/29 Javascript
js 省地市级联选择
2010/02/07 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
简单实现python爬虫功能
2015/12/31 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python str字符串转uuid实例
2020/03/03 Python
python实现扫雷小游戏
2020/04/24 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
python 通过exifread读取照片信息
2020/12/24 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
学习委员自我鉴定
2014/01/13 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
工作态度检讨书
2014/02/11 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2014年客房部工作总结
2014/11/22 职场文书
意向协议书
2015/01/27 职场文书
PHP中->和=>的意思
2021/03/31 PHP