在這里介紹一個簡易實現的方法。

　　首先，這里的彈窗長這樣：

　　建設企業網站多少錢

　　而原本頁面長這樣：

　　

　　這里假定圖中深綠色的按鈕作為觸發彈窗事件的按鈕，在這里命名為btn1，然后就是彈窗的制作：

　　由圖可看出，彈窗是基于整個屏幕的，有個灰色背景遮罩，中間有一塊白色底帶有圖標文字說明的內容提示區，下面還有兩個按鈕，close是關閉彈窗的作用。了解了這些，就開始制作彈窗了：

　　1、html結構如下：

　　

　　css樣式如下：

　　.tc{

　　width: ;

　　height: ;

　　position: fixed;

　　left: 0;

　　top: 0;

　　z-index: 9;

　　background: rgba(0,0,0,.5);

　　display: none;

　　}

　　.tc 【口碑好的網站開發價格】 .box{

　　width: 670px;

　　height: 404px;

　　background: #fff;

　　position: absolute;

　　left: 50%;

　　top: 50%;

　　transform: translate(-50%,-50%);

　　box-sizing: border-box;

　　padding-top: 54px;

　　}

　　.tc .box .icon{

　　width: 110px;

　　height: 110px;

　　margin: auto;

　　}

　　.tc .box .t1{

　　font-size: 18px;

　　line-height: 28px;

　　color: #333;

　　text-align: center;

　　box-sizing: border-box;

　　padding: 0 70px;

　　margin-top: 38px;

　　}

　　.tc .box .t2{

　　display: flex;

　　justify-content: center;

　　margin-top: 48px;

　　}

　　.tc .box .t2 .btn1{

　　width: 195px;

　　height: 40px;

模板網站制作報價

　　border: none;

　　background: #1296db;

　　color: #fff;【網頁改版】

　　font-size: 18px;

　　display: block;

　　cursor: pointer;

　　}

　　.tc .box .t2 .btn2{

　　width: 128px;

　　height: 40px;

　　border: none;

　　background: #295965;

　　color: #fff;

　　font-size: 18px;

　　display: block;

　　margin-left: 16px;

　　cursor: pointer;

　　}

　　由于在整個彈窗的父級div里加了隱藏屬性：display:none; 所以在頁面上是看不到彈窗的，這個時候就要開始寫觸發彈窗的點擊事件了，上面假定的按鈕是btn1，彈窗這塊的父級div是 tc 。

　　

　　到這里一個建議的點擊彈窗關閉的效果就實現了。

制作網站哪家好 網站搭建公司 專業網站建設制作價格