jQuery alert是常用的提示框插件,但是默認的樣式不太美觀。我們可以通過重寫樣式來使它更加好看。
// 新建一個CSS文件,例如alert-style.css .alert { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.5); color: #333; font-size: 14px; padding: 10px; position: absolute; z-index: 9999; } .alert .title { font-size: 18px; font-weight: bold; margin: 0; padding: 0; } .alert .message { margin: 10px 0; } .alert .btn { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; color: #333; cursor: pointer; display: inline-block; margin-left: 10px; padding: 5px 10px; text-align: center; text-decoration: none; }
以上代碼是alert的樣式代碼,我們可以根據自己的需求進行修改和調整。
接下來我們需要在項目中引入這個CSS文件,這可以通過在HTML文件中添加一個link標簽來實現:
這樣我們就成功地將alert的樣式重寫了,可以使用更加美觀的提示框了。