[英]Alert Message close button
我試圖在網站加載時彈出一條警報消息（如何玩游戲），並有一個“x”按鈕來關閉它。 有趣的是，當字體系列是“Courier”等其他東西時，按鈕是可見的，但我的游戲是哈利波特主題，我想使用一種特殊的字體，它似乎總是以某種方式“隱藏”按鈕. 我想知道是否有辦法使用“HarryPotter7”字體並顯示我的“x”按鈕。 任何幫助將不勝感激！
body { font-family: helvetica, arial, sans-serif; margin: 2em; } h1 { color: #6e2c60; } @font-face { font-family: 'Harry P'; src: url('http://www.fontsaddict.com/fontface/harry-p.TTF'); } @font-face { font-family: 'HarryPotter7'; src: url('http://www.fontsaddict.com/fontface/harrypotter7.ttf'); }
<style>.alert { font-family: "HarryPotter7"; padding: 20px; background-color: rgba(255, 255, 255, 0.52); color: purple; }.closebtn { margin-left: 15px; color: black; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; }.closebtn:hover { color: red; } </style> <body> <div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> <strong style="font-size: 150%">How to Play:</strong> <br> ✥ Type the full name and then hit enter or click on the "CHECK" button. <br> ✥ The system is case insensitive, but the spelling must be right, Start and pause the timer as you want. or reset the entire game with the reset button, <br> ✥ If time is up, the page will automatically reload to the scores page, or. you can click on "Finish Game" button towards the bottom. </div> </body>只需替換“×” 到“x”
<span class="closebtn" onclick="this.parentElement.style.display='none';">x</span>
如果您願意，只需使用×或圖標即可。
body { font-family: helvetica, arial, sans-serif; margin: 2em; } h1 { color: #6e2c60; } @font-face { font-family: 'Harry P'; src: url('http://www.fontsaddict.com/fontface/harry-p.TTF'); } @font-face { font-family: 'HarryPotter7'; src: url('http://www.fontsaddict.com/fontface/harrypotter7.ttf'); }
<style>.alert { font-family: "HarryPotter7"; padding: 20px; background-color: rgba(255, 255, 255, 0.52); color: purple; }.closebtn { margin-left: 15px; color: black; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; }.closebtn:hover { color: red; } </style> <body> <div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">× </span> <strong style="font-size: 150%">How to Play:</strong> <br> ✥ Type the full name and then hit enter or click on the "CHECK" button. <br> ✥ The system is case insensitive, but the spelling must be right, Start and pause the timer as you want. or reset the entire game with the reset button, <br> ✥ If time is up, the page will automatically reload to the scores page, or. you can click on "Finish Game" button towards the bottom. </div> </body>
Twitter Bootstrap警報消息無需按關閉按鈕即可關閉
[英]Twitter Bootstrap alert message closes without pressing close button
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.