原生js封装简单模态框

最新推荐文章于 2021-08-09 16:04:24 发布
最新推荐文章于 2021-08-09 16:04:24 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： javascript 文章标签： confirm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39685861/article/details/80243283
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{font-weight: normal;font-style: normal;}
        .mask-layer{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background:rgba(0,0,0,.6);
        }

        .model-icon{
            width: 100px;
            transform: translate(-50%,-50%);
            /* margin-top: -10px; */
            position: absolute;
            top: 0px;
            left: 50%;
        }
        .model-blank{
            height: 24px;
        }
        .model-container{
            width: 400px;
            min-height: 200px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0px 0px 4px 2px #f1f8ff;
            text-align: center;
            font-size: 18px;
            color: #333;
            padding: 10px 24px;
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left:50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
        .model-container .model-title{ font-size: 24px;}
        .model-container .controls{
            /*position: absolute;*/
            /*bottom: 19px;*/
            width: 100%;
            margin: 20px 0;
        }
        .model-container a{
            display: inline-block;
            width: 49%;
            text-align: center;
            cursor: pointer;
            background: royalblue;
            height: 36px;
            line-height: 36px;
            border-radius: 5px;
            color: #fff;
        }
        .model-container .confirm{

        }
    </style>
</head>
<body>
<button id="btn">开启模态框</button>
<script>
  var ModelBox=(function(){
    var ModelBox=function(option){
      this.option=option||{};
      this.init();
    };
    ModelBox.prototype={
      isShow:false,
      init:function(){
        var _this=this;
        _this.isShow=this.option.isShow;
        var html =
          '<div class="model-container">'
          +(_this.option.iconSrc?'<img  class="model-icon"/>':'')
          +(_this.option.iconSrc?'<div  class="model-blank"></div>':'')
          +'<h1 class="model-title">title</h1>'
          +'<div class="model-content"></div>'
          +'<div class="controls">'
          +'<a class="confirm model-confirm">确定</a>'
          +'<a class="cancel model-cancel">取消</a>'
          +'</div>'
          +'</div>';
        var ModelBoxCon=document.createElement("div");
        ModelBoxCon.setAttribute("class","mask-layer");
        ModelBoxCon.innerHTML=html;
        ModelBoxCon.querySelector(".model-title").innerHTML=_this.option.title;
        ModelBoxCon.querySelector(".model-content").innerHTML=_this.option.content;
        ModelBoxCon.querySelector(".model-confirm").innerHTML=_this.option.confirm;
        ModelBoxCon.querySelector(".model-cancel").innerHTML=_this.option.cancel;
        _this.option.iconSrc && (ModelBoxCon.querySelector(".model-icon").setAttribute("src",_this.option.iconSrc));
        !_this.option.isShowConfirm && (ModelBoxCon.querySelector(".model-confirm").style.display = 'none');
        document.getElementsByTagName("body")[0].appendChild(ModelBoxCon);
        if(!_this.isShow){
          ModelBoxCon.style.display="none";
        }
        ModelBoxCon.querySelector(".cancel").onclick=ModelBoxCon.querySelector(".confirm").onclick=_this.eventsFn.bind("",this,ModelBoxCon);


      },
      show:function(){
        document.querySelector(".mask-layer").style.display="block";
        this.isShow=true;
      },
      hide:function(){
        document.querySelector(".mask-layer").style.display="none";
        this.isShow=false;
      },
      eventsFn:function(e,doc,target){
        var _thisEvent=target.target;
        if(_thisEvent.classList.contains("confirm")){
          e.option.confirmCallBack();
        }
        doc.style.display="none";
        e.isShow=false;
        return false;
      }

    }||{};
    return ModelBox;
  })();
</script>
<script>
  var opt=new ModelBox({
    title:"提示框",//标题
    content:"这是一个弹出框这是一个弹出框这是一个弹出框这是一个弹出框",//内容
    confirm:"确认",//确认文字
    cancel:"关闭",//关闭按钮文字
    isShow:false,//初始状态
    isShowConfirm:false,//是否显示确认按钮
    iconSrc:'https://www.hecoos.com/Statics/Message/success.png',//头部图标 为空不显示
    confirmCallBack:(function(){//确认回调
      alert("操作成功");
    })

  });
  document.querySelector("#btn").onclick=function(){
    !opt.isShow?opt.show():opt.hide();
  }
</script>
</body>
</html>

 

小小小卒
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 实现模态框 model.js
09-28
js 实现模态框
原生JS封装Modal弹框
qq_32021429的博客
04-12 2610
使用原生JS(es5)封装一个属于自己的Modal弹框 效果图展示 主要代码 function Modal(options) { options = Object.assign({ title: '标题', backgroundColor: '#fff', // 背景颜色 mask: true, //是否显示遮罩层, content: '弹框内容', cancelText: '取消',//取消按钮文字 okText: '确认'
原生html中modal,js 原生实现的modal弹出框架
weixin_28913879的博客
06-03 464
```模态框实现h4 {margin-left: 20px;}p {text-align: center;}.btn {width: 100px;height: 35px;border-radius: 5px;font-size: 16px;color: white;background-color: cornflowerblue;}.btn:hover,.btn:focus {backgroun...
原生js写简易模态框
fish_skyyyy的博客
12-14 1408
使用原生js实现一个简易的模态框 首先上效果图： 思路：首先创建一个button按钮，显示，其次创建一个div大框，隐藏，div中包含有一个子元素p，p元素中包含有一个子元素span。点击button按钮，触发div显示、button隐藏，点击span关闭事件，触发div隐藏、button显示。 遇到的问题：因为我是使用DOM节点的知识用javascript实现的，所以在创建好第一个div大框的时候，我不知道怎么添加进body父级元素中 解决方案：最开始使用body.appendChild(div)，总是报
js字符串插入_基于原生JS封装Modal对话框插件
weixin_39520013的博客
12-03 170
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件，个人用来学习原理与思想，只有简单的基本框架的实现，可在此基础上添加更多配置项API配置//基本语法 Modal插件核心功能的开发导出(使用对象和函数创建实例想使用创建对象的方式new ModalPlugin()创建实例或当做普通函数执行ModalPlugin(),创建实例,需要这样做(配置项//封装插件的时候,需要支持很多配置项...
layer.rar 使用js 闭包封装的原生提示模态框
08-23
在这个场景中，我们讨论的是一个名为"layer.rar"的压缩包，它包含了一个利用JavaScript闭包技术封装的提示模态框。这个模态框设计得既适应PC设备，也能在不同分辨率的设备上良好运行，体现了响应式设计的概念。 ...
小程序开发之模态框组件封装
10-15
封装模态框组件的过程主要包括以下几个步骤： 1. **组件注册**：在使用模态框的页面`json`配置文件中，需要注册这个自定义组件。例如： ```json { "navigationBarTitleText": "XXXX", "usingComponents": { ...
封装的dialog插件 基于bootstrap模态对话框的简单扩展
09-01
4. **遮罩层**：默认情况下，会显示遮罩层，与原生Bootstrap模态框一致。 5. **键盘事件**：支持通过Esc键关闭模态对话框。 6. **远程内容加载**：通过`data-remote`属性可以加载远程URL的内容到对话框内。 7. **回...
C#实现客户端弹出消息框封装类实例
09-03
2. `ShowMessage(string message)`：此方法用于显示自定义标题的提示信息，它会调用一个模态窗口（非JavaScript原生的`alert()`）。默认的标题为“系统提示”，宽度为180像素，高度为120像素，`message`参数包含要...
基于iview二次封装实用组件
04-14
iview是一个流行的Vue.js UI框架，提供了丰富的预设组件，如按钮、表格、表单、模态框等，适用于快速构建企业级后台界面。然而，每个项目都有其特殊需求，直接使用iview可能无法完全满足。这就是进行二次封装的意义...
原生JS+css3实现bootstrap模态框
08-20
用原生JavaScript和CSS3共同实现bootstrap模态框效果。
原生js实现简单的模态框示例
10-19
下面小编就为大家带来一篇原生js实现简单的模态框示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
(js) 封装dialog模态框插件
weixin_42069147的博客
04-06 602
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <!-- IMPORT CSS
原生js => 实现模态框
weixin_34199335的博客
12-21 296
先看实现的的效果 具体代码如下所示 .html &lt;!-- 模态框 --&gt; &lt;section class="modal"&gt; &lt;div class="modal-info center-self-xy mYBounceInDown"&gt; &lt;div class="modal-t"&gt; &lt;p class="cen
Web-js：实现拖动对话框（模态框）
lzzw的学习之路
08-09 390
实现点击按住蓝色区域移动鼠标实现拖动整个区域，松开时固定在当前位置： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i.
JavaScript 原生实现模态框弹出层
找个地方记录踩坑
11-25 1223
点击“收藏”弹出模态框，模态框z-index：1000，遮罩层z-index：900。 点击“确定”、“取消”或键盘“Esc”键隐藏模态框，键盘按键可在customConfig里自由设置。 模态框预设9个位置，同时可以设置x、y轴偏移量，具体设置是在customConfig里指定position、yOffset、xOffset，默认中间向上偏移150px。 HTML &lt;button id...
JS弹出模态框内嵌其它网页
IT从业者
12-26 4782
JS弹出模态框内嵌其它网页
原生js创建模态框
weixin_39037804的博客
08-21 304
1.效果图如下： 2.代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <styl...
bootstrap模态框封装
最新发布
07-28
对于Bootstrap模态框的封装，你可以按照以下步骤进行操作： 1. 引入Bootstrap库：在你的HTML文件中，确保你已经引入了Bootstrap的CSS和JavaScript文件。可以使用CDN链接或者本地文件。 2. 创建模态框的HTML结构：在HTML文件中添加一个用于模态框的容器元素，例如一个`<div>`元素。给这个元素添加一个唯一的ID，以便在后续的操作中引用它。 3. 触发模态框的按钮或链接：在页面中添加一个触发模态框的按钮或链接。给这个按钮或链接添加一个`data-toggle`属性，并将其值设置为`modal`。然后，将`data-target`属性设置为步骤2中创建的模态框容器元素的ID。 4. 内容填充：在模态框容器元素中添加模态框的内容。这可以是文本、表单、图像等等。根据你的需求进行相应的布局和样式设置。 5. JavaScript交互：为了使模态框能够正常工作，你需要添加一些JavaScript代码。使用jQuery或者原生JavaScript来实现以下功能： - 当点击触发按钮时，显示模态框； - 当点击模态框外部区域或关闭按钮时，隐藏模态框； - 可以通过编写事件处理程序来处理模态框上的表单提交、按钮点击等交互操作。 以下是一个简单的示例代码，演示了如何封装Bootstrap模态框： ```html <!-- 步骤2：模态框的容器元素 --> <div id="myModal" class="modal"> <!-- 步骤4：模态框的内容 --> <div class="modal-content"> <span class="close">×</span> <h2>模态框标题</h2> <p>模态框内容</p> </div> </div> <!-- 步骤3：触发模态框的按钮 --> <button type="button" data-toggle="modal" data-target="#myModal">打开模态框</button> <!-- 步骤5：JavaScript交互 --> <script> // 当点击触发按钮时，显示模态框 $('[data-toggle="modal"]').on('click', function() { $('#myModal').show(); }); // 当点击关闭按钮或模态框外部区域时，隐藏模态框 $('.close, .modal').on('click', function() { $('#myModal').hide(); }); </script> ``` 以上是一个基本的封装示例，你可以根据你的实际需求进行修改和扩展。希望对你有帮助！如有更多问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值