自定义confirm提示框

2024年4月9日 100次阅读 来源: charlotteeeeeee

HTML

<div class="alertmes">
    <div class="am-wrapper">
        <div class="am-mes">提示语</div>
        <div class="am-btn">
        <input type="button" value="确定" class="btn am-confirm-btn"/>
        <input type="button" value="取消" class="btn am-cancel-btn"/>
        </div>
    </div>
</div>

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 #ddd;
      border-radius: 4px;
      box-shadow: 0 0 5px #ddd;
      .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: #ddd;
                }
            }
        }
    }
}

js

    //蒙层确认按钮按钮
    $(".am-confirm-btn").click(function(){
        //蒙层关闭以及做相应提交
        $(".alertmes").hide()
    })
    //蒙层取消按钮按钮
    $(".am-cancel-btn").click(function(){
        $(".alertmes").hide()
    })
    原文作者：charlotteeeeeee
    原文地址: https://segmentfault.com/a/1190000019030514
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞