自定義confirm提示框

BaronZhang 發布于2019-08-29 18:46 / 1596人閱讀

摘要：提示語確定取消蒙層確認按鈕按鈕蒙層關閉以及做相應提交蒙層取消按鈕按鈕

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 提示框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114559.html

自定義confirm提示框

摘要：提示語確定取消蒙層確認按鈕按鈕蒙層關閉以及做相應提交蒙層取消按鈕按鈕 HTML 提示語 SCSS /*alertmes*/ .alertmes{ position: fixed; top: 0; right: 0; width: 100%; height:...

CoyPan 2019-08-02 16:15 評論0 收藏0
自定義confirm提示框

摘要：提示語確定取消蒙層確認按鈕按鈕蒙層關閉以及做相應提交蒙層取消按鈕按鈕 HTML 提示語 SCSS /*alertmes*/ .alertmes{ position: fixed; top: 0; right: 0; width: 100%; height:...

worldligang 2019-08-23 17:13 評論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