网(Wang)页(Ye)版(Ban)Toast弹(Dan)窗(Chuang)如(Ru)何(He)实(Shi)现(Xian)？(?)

最(Zui)近(Jin)通(Tong)辽(Liao)易(Yi)联(Lian)通(Tong)达(Da)应(Ying)客(Ke)户(Hu)的(De)要(Yao)求(Qiu)，(?)开(Kai)发(Fa)了(Liao)一(Yi)个(Ge)网(Wang)页(Ye)版(Ban)的(De)Toast弹(Dan)窗(Chuang)。(?)代(Dai)码(Ma)跟(Gen)大(Da)家(Jia)分(Fen)享(Xiang)一(Yi)下(Xia)。(?)
效(Xiao)果(Guo)图(Tu)如(Ru)下(Xia)：(?)

功(Gong)能(Neng)主(Zhu)要(Yao)是(Shi)摒(Bing)弃(Qi)了(Liao)alert弹(Dan)窗(Chuang)，(?)因(Yin)为(Wei)alert弹(Dan)窗(Chuang)默(Mo)认(Ren)带(Dai)有(You)网(Wang)址(Zhi)链(Lian)接(Jie)，(?)不(Bu)太(Tai)合(He)适(Shi)。(?)
开(Kai)发(Fa)步(Bu)骤(Zhou)如(Ru)下(Xia)
1.首(Shou)先(Xian)加(Jia)载(Zai)Toast相(Xiang)关(Guan)的(De)js库(Ku)和(He)css库(Ku)
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
2.在(Zai)Html页(Ye)面(Mian)中(Zhong)增(Zeng)加(Jia)弹(Dan)窗(Chuang)元(Yuan)素(Su)，(?)默(Mo)认(Ren)是(Shi)不(Bu)显(Xian)示(Shi)的(De)。(?)只(Zhi)有(You)点(Dian)击(Ji)Copy按(An)钮(Niu)才(Cai)显(Xian)示(Shi)。(?)
          <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Information</strong>
              <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
              <p>Copy success!</p>
            </div>
          </div>
3. 在(Zai)javascript中(Zhong)增(Zeng)加(Jia)Copy按(An)钮(Niu)的(De)点(Dian)击(Ji)事(Shi)件(Jian)
  var toastElList = [].slice.call(document.querySelectorAll('.toast'));
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  });
  toastList.forEach(toast => toast.show());

欢(Huan)迎(Ying)大(Da)家(Jia)跟(Gen)我(Wo)交(Jiao)流(Liu)。(?)