今天介紹乙個用css實現模態視窗的外掛程式——css modal ,利用它可以很方便的實現模態視窗。它可以用來展示任意的html內容,並且支援響應式設計,具有良好的相容性,通過它的js擴充套件,還能實現更強大的功能。
1、相容性
chrome
firefox
safari 6.x
opera 12+
internet explorer 8 (部分功能)
internet explorer 9+
ios 6
android 2.3 (functional)
android 4.x
windows phone 8
2、使用方法
rel="stylesheet"
href="test/modal.css">
src="modal.js">
script>
使用css modal html結構
href="#modal-show"
title="css modal">css modala>
li>
ul>
class="modal--show"
id="modal-show"
tabindex="-1"
role="dialog"
aria-labelledby="label-show"
aria-hidden="true">
class="modal-inner">
id="label-show">css modal—純css實現模態視窗h2>
header>
class="modal-content">
今天介紹乙個用css實現模態視窗的外掛程式——css modal ,利用它可以很方便的實現模態視窗。它可以用來展示任意的html內容,並且支援響應式設計,具有良好的相容性,通過它的js擴充套件,還能實現更強大的功能。p>
div>
by zjianp>
footer>
div>
href="#!"
class="modal-close"
title="close this modal"
data-dismiss="modal"
data-close="close">×a>
section>
純css實現箭頭
很久之前收集的,忘記出處了。1.梯形 當元素寬 高和邊框的寬相近 等 時,改變某一邊的顏色可以看到乙個梯形 border 10px solid 000 border left color f00 width 10px height 10px 2.三角形 當元素寬 高為零,且其他邊為透明顏色時,可以形...
純CSS實現表單驗證
關鍵在於使用css selectors levle4裡的一些偽類實現表單驗證,這些偽類有 上面的案例就是使用了 in range和 out of range,接下去我們來一一解讀下。required可以選中具有required屬性的表單元素,可以是input select和textarea,例如下面...
純css實現tab切換
所用技術有 css選擇器 相鄰兄弟選擇器 element element 用於選取第乙個指定的元素之後的緊跟的元素,該元素是被選取元素的兄弟 不是內部 element1 element2 它可以element1之後所有的element2 兩元素必須擁有相同父元素,但是element2不必直接緊隨el...