自定义confirm提示框

CoyPan 发布于2019-08-02 16:15 / 2106人阅读

摘要：提示语确定取消蒙层确认按钮按钮蒙层关闭以及做相应提交蒙层取消按钮按钮

HTML

</>复制代码 
    
        提示语

SCSS

</>复制代码 
/*alertmes*/
.alertmes{
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  overflow: hidden;
  display: none;
  .am-wrapper{
      width: 90%;
      margin: 200px auto 0;
      max-width: 400px;
      padding: 20px;
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid #ffffd;
      border-radius: 4px;
      box-shadow: 0 0 5px #ffffd;
      .am-mes{
            margin: 10px 0 30px;
        }
      .am-btn{
            text-align: right;
            input.btn{
              border: none;
              padding: 5px 10px;
              background-color: #b40605;
              color: #fff;
              border-radius: 4px;
              outline: none;
              &.am-cancel-btn{
                    background-color: #ffffd;
                }
            }
        }
    }
}

</>复制代码 
    //蒙层确认按钮按钮
    $(".am-confirm-btn").click(function(){
        //蒙层关闭以及做相应提交
        $(".alertmes").hide()
    })
    //蒙层取消按钮按钮
    $(".am-cancel-btn").click(function(){
        $(".alertmes").hide()
    })

GPU云服务器云服务器自定义提示框自定义提示框html 自定义confirm 提示框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54955.html

自定义confirm提示框

摘要：提示语确定取消蒙层确认按钮按钮蒙层关闭以及做相应提交蒙层取消按钮按钮 HTML 提示语 SCSS /*alertmes*/ .alertmes{ position: fixed; top: 0; right: 0; width: 100%; height:...

worldligang 2019-08-23 17:13 评论0 收藏0
自定义confirm提示框

摘要：提示语确定取消蒙层确认按钮按钮蒙层关闭以及做相应提交蒙层取消按钮按钮 HTML 提示语 SCSS /*alertmes*/ .alertmes{ position: fixed; top: 0; right: 0; width: 100%; height:...

BaronZhang 2019-08-29 18:46 评论0 收藏0
用vue实现模态框组件

摘要：组件结构头部内容区域尾部操作按钮模态框结构分为三部分，分别为头部内部区域和操作区域，都提供了，可以根据需要定制。调用点击确定按钮的回调处理点击取消按钮的回调处理用创建一个索引就很方便拿到模态框组件内部的方法了。基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实...

mrcode 2019-08-21 14:28 评论0 收藏0
潜在的恶意：前端弹窗类组件的键盘操作

摘要：而当用户使用键盘操作，焦点发生变化后，当前焦点在哪一项上，必须给出明确的视觉提示，否则极容易带来困难，甚至误操作。回车键按下时，则会到相应账号，或者取消操作关闭弹出层。再来看看组件库的组件中的确认消息。本文作者:文蔺原文地址:http://www.wemlion.com/2016/a...本文由 @文蔺创作，转载请保留此声明。所有权利保留，请勿用于商业目的。问题提出需要说明的是...

tinylcy 2019-08-22 10:46 评论0 收藏0