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中的location用法简单介绍
Mar 07 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
webpack external模块的具体使用
Mar 10 Javascript
JS实现字符串翻转的方法分析
Aug 31 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 取得瑞年与平年的天数的代码
2009/08/10 PHP
优化PHP程序的方法小结
2012/02/23 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
JavaScript 事件系统
2010/07/22 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python实现拼接图片
2020/03/23 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
编辑个人求职信范文
2013/09/21 职场文书
品德与社会教学反思
2016/02/24 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
新手初学Java网络编程
2021/07/07 Java/Android