如何在css中设置消息弹窗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (64)

是否有可能创建类似的这个弹窗(https://ibb.co/kwxusJ)在CSS里?我在我的cPanel仪表板上看到了这个弹窗。当我尝试查看它时它跳到了登录页面,无法查看。

    background:url(../images/info.png) no-repeat 12px 12px;
       border:1px solid #ddd;
       border-radius:3px;
       display:block;
       line-height:20px;
       min-height:20px;
       margin:6px 0;
       padding:10px 10px 10px 38px
       }
    #error{
       background:#fff url(../images/warning.png) no-repeat 10px 10px;
       background-size:20px 20px;
       border:1px solid #F44336;
       border-left-width:8px;
       border-radius:3px
       }
<div id="notice" style="margin:0;">some text here</div>

提问于
用户回答回答于
        .alert {
		    max-width: 550px;
		    position:  relative;
		    padding: 10px 20px 10px 10px;
		    margin:  10px auto;
		    border-radius: 3px;
		    background-color: #faf8df;
		    border: 2px solid #f5c340;
		    border-left-width: 40px;
		}
		.alert:before {
			content: '!';
			position: absolute;
			left: -30px;
			top: 50%;
			margin-top: -10px;
			width:  20px;
			height:  20px;
			border-radius: 50%;
			text-align: center;
			color: #f5c340;
			font-size: 17px;
			background-color:  #fff;
		}
		.alert .close {
		    position:  absolute;
		    right: 8px;
		    cursor:  pointer;
		    top: 10px;
		    color: #999;
		}
<div class="alert">
		<b>Warning:</b> this is the text you want to show as a warning message.
		<span class="close">&times;</span>
	</div>

扫码关注云+社区

领取腾讯云代金券