<a href = "JavaScript:void(0)" onclick = "openDialog1()">查看更多</a>
以上是原本顯示的內(nèi)容,可以放在任何地方。
<div id="light1" class="white_content"> <div class="leftcont"> <a href = "javascript:void(0)" onclick = "closeDialog1()" class="close"><img src="/style/close.png" alt=""></a> </div> <div class="rightcont"> <p>?瑜伽的時候讓你的身體沒有外在的束縛,舒展自如,能帶給你平靜、放松心情的瑜伽服才是手選。</p> </div> </div>
這一段是彈窗代碼,ID為light1,里面附帶了一個關(guān)閉按鈕。
下面這一段是JS代碼。
function openDialog1(){ document.getElementById('light1').style.display='block'; } function closeDialog1(){ document.getElementById('light1').style.display='none'; }
為什么ID和按鈕后面我都有一個數(shù)字1呢。因為這個可以在一個頁面中加N多個,同時假如你是從后臺調(diào)用數(shù)據(jù),那么可以用標(biāo)簽進(jìn)行循環(huán)生成數(shù)據(jù)。
非常實(shí)用簡單易懂。