CSS Modal 純CSS實現模態視窗

2021-07-06 01:22:48 字數 1207 閱讀 1832

今天介紹乙個用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...