svg+css实现的消息通知提示提醒框效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：svg+css实现的消息通知提示提醒框效果代码，结合jquery可点击关闭按钮关闭弹出层。

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');
	html,body {
	height:100%;
	width:100%;
	font-family:'Raleway',sans-serif;
	background-color:#efefef;
	display:table;
	text-align:center;
}
.toast__container {
	display:table-cell;
	vertical-align:middle;
}
.toast__cell {
	display:inline-block;
}
.add-margin {
	margin-top:20px;
}
.toast__svg {
	fill:#fff;
}
.toast {
	text-align:left;
	padding:21px 0;
	background-color:#fff;
	border-radius:4px;
	max-width:500px;
	top:0px;
	position:relative;
	box-shadow:1px 7px 14px -5px rgba(0,0,0,0.2);
}
.toast:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:4px;
	height:100%;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
}
.toast__icon {
	position:absolute;
	top:50%;
	left:22px;
	transform:translateY(-50%);
	width:14px;
	height:14px;
	padding:7px;
	border-radius:50%;
	display:inline-block;
}
.toast__type {
	color:#3e3e3e;
	font-weight:700;
	margin-top:0;
	margin-bottom:8px;
}
.toast__message {
	font-size:14px;
	margin-top:0;
	margin-bottom:0;
	color:#878787;
}
.toast__content {
	padding-left:70px;
	padding-right:60px;
}
.toast__close {
	position:absolute;
	right:22px;
	top:50%;
	width:14px;
	cursor:pointer;
	height:14px;
	fill:#878787;
	transform:translateY(-50%);
}
.toast--green .toast__icon {
	background-color:#2BDE3F;
}
.toast--green:before {
	background-color:#2BDE3F;
}
.toast--blue .toast__icon {
	background-color:#1D72F3;
}
.toast--blue:before {
	background-color:#1D72F3;
}
.toast--yellow .toast__icon {
	background-color:#FFC007;
}
.toast--yellow:before {
	background-color:#FFC007;
}
    </style>
</head>

<body>
    <div class="toast__container">
        <div class="toast__cell">
            <div class="toast toast--green">
                <div class="toast__icon"><svg version="1.1" class="toast__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0    c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7    C514.5,101.703,514.499,85.494,504.502,75.496z"></path></g></g></svg></div>
                <div class="toast__content">
                    <p class="toast__type">成功</p>
                    <p class="toast__message">任何有访问权限的人都可以查看你邀请的访问者。</p>
                </div>
                <div class="toast__close"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 15.642 15.642"><path fill-rule="evenodd" d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"></path></svg></div>
            </div>
            <div class="toast toast--blue add-margin">
                <div class="toast__icon"><svg version="1..........完整代码请登录后点击上方下载按钮下载查看