原生js+css实现可自定义参数的右下角弹出层消息提醒代码-html代码-BFW代码库

原生js+css实现可自定义参数的右下角弹出层消息提醒代码

代码语言：html

所属分类：弹出层

代码描述：原生js+css实现可自定义参数的右下角弹出层消息提醒代码，可设置是否显示自定义按钮、是否显示关闭按钮。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    font-size: 62.5%;
}
body {
    box-sizing: border-box;
    font-size: 1.6rem;
    background-color: #222226;
    color: #FEE;
    font-family: "Roboto", sans-serif;
    margin: 5rem;
}
h1 {
    margin-bottom: 2rem;
}

/* CREATE FORM */
.form {
    max-width: 60rem;
}

.form__radios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
}
.form__radio {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2rem;
    row-gap: .8rem;
    margin-top: 1rem;
}
.form__radio p {
    grid-column: 1 / -1;
}

.form__inputs {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: 4rem;
}
.form__inputs input, .form__radios input {
    margin-bottom: 1rem;
    background-color: #556;
    border: none;
    padding: 1rem 1.5rem;
    color: inherit;
    outline: transparent;
}

.form__buttons {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 2fr));
    gap: 1rem 2rem;
}

.btn {
    background-color: #778;
    color: inherit;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
}
.btn:hover { background-color: #556; }
.btn--success { background-color: rgb(21, 173, 89); }
.btn--success:hover { background-color: rgb(12, 134, 67); }
.btn--error { background-color: rgb(199, 29, 66); }
.btn--error:hover { background-color: rgb(158, 16, 47); }
.btn--warning { background-color: rgb(232, 172, 21); color: #222226; }
.btn--warning:hover { background-color: rgb(199, 141, 15); }


/* THE ACTUAL TOAST NOTIFICATIONS */
.toast {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 90%;
}

.toast__message {
    position: relative;
    color: #EEE;
    background-color: #334;
    width: 50rem;
    max-width: 100%;
    max-width: 100%;
    padding: 3rem;
    .........完整代码请登录后点击上方下载按钮下载查看