html5如何實(shí)現(xiàn)彈出提示框，并且伴隨遮罩層并且可以關(guān)閉彈出框

通過jquery的show()和hide()函數(shù)聯(lián)合使用，實(shí)現(xiàn)彈出窗口。

成都創(chuàng)新互聯(lián)公司是專業(yè)的網(wǎng)站建設(shè)公司,提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計(jì)等網(wǎng)站開發(fā)一體化解決方案;包括H5頁面制作,小程序定制開發(fā),網(wǎng)站定制,企業(yè)網(wǎng)站建設(shè),成都商城網(wǎng)站開發(fā),成都響應(yīng)式網(wǎng)站建設(shè),建網(wǎng)站,PHP網(wǎng)站建設(shè),軟件開發(fā)，軟文平臺(tái)，網(wǎng)站營(yíng)銷。歡迎做網(wǎng)站的企業(yè)前來合作洽談,成都創(chuàng)新互聯(lián)公司將竭誠(chéng)為您服務(wù)!

一、show（）和hide（）函數(shù)解析：

1、show() 方法顯示隱藏的被選元素。

注意：show() 適用于通過 jQuery 方法和 CSS 中 display:none 隱藏的元素（不適用于通過 visibility:hidden 隱藏的元素）。

2、hide() 方法隱藏被選元素。

這與 CSS 屬性 display:none 類似，但是隱藏的元素不會(huì)被完全顯示（不再影響頁面的布局）。

二、設(shè)計(jì)一個(gè)HTML頁面，包括一個(gè)簡(jiǎn)單的彈出窗，和一個(gè)顯示按鈕。其中，調(diào)用了jquery的以上兩個(gè)函數(shù)。具體代碼如下：

三、設(shè)計(jì)遮罩層的樣式，如下：

四、彈出窗口的css樣式，代碼如下：

五、初始頁面如下：

六、點(diǎn)擊按鈕，查看彈出窗口結(jié)果：

七、關(guān)閉彈出窗后，打開開發(fā)者中心，如下：

如何67實(shí)現(xiàn)HTML5表單提示彈窗功能

.tooltip, .arrow:after {

background: black;

border: 2px solid white;

}

.tooltip {

pointer-events: none;

opacity: 0;

display: inline-block;

position: absolute;

padding: 10px 20px;

color: white;

border-radius: 20px;

margin-top: 20px;

text-align: center;

font: bold 14px"Helvetica Neue", Sans-Serif;

font-stretch: condensed;

text-decoration: none;

text-transform: uppercase;

box-shadow: 0 0 7px black;

}

.arrow {

width: 70px;

height: 16px;

overflow: hidden;

position: absolute;

left: 50%;

margin-left: -35px;

bottom: -16px;

}

.arrow:after {

content:"";

position: absolute;

left: 20px;

top: -20px;

width: 25px;

height: 25px;

-webkit-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;

-moz-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;

box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

}

.tooltip.active {

opacity: 1;

margin-top: 5px;

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2s ease;

-ms-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

}

.tooltip.out {

opacity: 0;

margin-top: -20px;

}

html5左側(cè)彈出菜單怎樣實(shí)現(xiàn)

這個(gè)可以通過絕對(duì)定位，配合left設(shè)置 或者translate去實(shí)現(xiàn)

left的方法：

比如讓class為menu的元素寬為300px，高100%的，設(shè)置left為-300px；在這期間可以加一個(gè)過渡transition:left 0.3s ...；

然后讓class為menu active的元素設(shè)置 left設(shè)置為0就可以了 ，在這期間可以加一個(gè)過渡transition:left 0.3s ...；

然后可以通過Jquery的toggleClass('active');來實(shí)現(xiàn)切換

translate

比如讓class為menu的元素寬為300px，高100%的，設(shè)置left為-300px；在這期間可以加一個(gè)過渡transition:left 0.3s ...；

然后讓class為menu active的元素設(shè)置 transform:translate3d(-300px,0,0) ，在這期間可以加一個(gè)過渡transition:left 0.3s ...；

然后可以通過Jquery的toggleClass('active');來實(shí)現(xiàn)切換

這個(gè)過程中 需要注意 body需要overflow：hidden; (不然會(huì)有滾動(dòng)條，可設(shè)置overflow-x即可)

left 和 translate 最好用translate ，translate3d可以開啟GPU硬件加速，性能會(huì)更好，體驗(yàn)會(huì)更流暢

我github有類似小組件樣式

github： IFmiss

希望能解決你的問題

HTML5 input焦點(diǎn)鍵盤彈出問題

最近項(xiàng)目有個(gè)需求，我們使用的是PDA裝置，它有掃描槍，可以讓掃描出來的內(nèi)容填寫到html的input控件中。

但是有一個(gè)棘手問題，就是input控件只要獲取焦點(diǎn)，就會(huì)彈出鍵盤。

項(xiàng)目的需求，希望剛開始時(shí)，只是將焦點(diǎn)聚集在input控件上，可以通過掃描槍輸入，然后點(diǎn)擊input控件時(shí)，還能彈出鍵盤進(jìn)行修改。

這個(gè)問題解決核心就是 input控件聚焦的時(shí)候，不彈出鍵盤，當(dāng)點(diǎn)擊的時(shí)候，才彈出鍵盤。

嘗試了很多方法，最后發(fā)現(xiàn)了readOnly屬性一個(gè)詭異作用。當(dāng)調(diào)用 input控件的focus()方法時(shí)，如果readOnly屬性為true，那么不會(huì)彈出鍵盤，但是焦點(diǎn)已經(jīng)在 input控件上了。這個(gè)時(shí)候，再將readOnly屬性設(shè)置為false，那么這個(gè)時(shí)候鍵盤不會(huì)彈出，但是可以掃描槍輸入了。

示例:

html5浮動(dòng)層彈窗 求教 是html代碼

html

style?type="text/css"

.black_overlay{????

display:?none;????

position:?absolute;top:?0%;????

left:?0%;????

width:?100%;????

height:?100%;????

background-color:?black;????

z-index:1001;????

-moz-opacity:?0.8;????

opacity:.80;????

filter:?alpha(opacity=80);??????

}????

.white_content{????

display:?none;????

position:?absolute;????

top:?25%;??left:?25%;????

width:?50%;????

height:?50%;????

padding:?16px;????

border:?16px?solid?black;????

background-color:?white;????

z-index:1002;????

overflow:auto????

}????

/style

script?type="text/javascript"

/script

body

input?type="button"?text="彈出層"?onClick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"

div?id="light"?class="white_content"????

a?href="#"?onClick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"?style="color:black;z-index:9999"Close/a????

div?style="width:715px;height:360px;border:#ccc?solid?1px;"?id="dituContent"

這里就是彈出的內(nèi)容

/div????

/div????

/body

/html

就是這樣的。使用postion屬性和層的隱藏和顯示就實(shí)現(xiàn)啦