jquery 實現彈出框 開啟與關閉

2022-07-20 19:30:11 字數 1145 閱讀 4559

首先,引入jquery檔案

第二步:html建立按鈕,以及彈出框

按鈕

id="open111">[開啟彈出框]

彈出框(底層濾鏡+內容部分+關閉按鈕)

x。。。

接下來根據需求設定樣式,這裡講下彈出框的樣式

濾鏡:

position: fixed;//固定定位

left: 0;

top: 0;//距離左邊和頂部為0

width: 100%;

height: 100%;//全屏

background: rgba(0,0,0,0.8);//顏色

display: none;//預設隱藏:點選按鈕顯示

內容:根據自己需求來定
position: fixed;//固定定位
width: 50%;left: 50%;margin-left: -25%;//居中
top: 100px;//距離頂部100px

height: 400px;//高度為400px

background: #fff;//背景顏色

關閉按鈕:

position: absolute;//相對於內容部分定位,右上角

top: 0;

right: 0;

width: 50px;

height: 50px;//設定寬高

text-align: center;

line-height: 50px;//居中

font-size: 30px;

cursor:pointer;//滑鼠放上去為手

color: #fff;

z-index: 100;

最後一步就是寫功能js**

/*開啟彈出框*/

$("#open111").click(function ()

});/*關閉彈出框*/

$("#gbaaa").click(function ()

});

jquery實現簡單的彈出框

彈出框本身是乙個div,預設是隱藏不展示的,在需要彈框的時候使其顯示,並浮在當前頁面之上 彈框樣式 tanchuang tanchuang img 彈框div form表單 新人入戶頁 style width 200px 大小限制 380 380 value 點選預覽彈出div previewimg...

jquery彈出框外掛程式

1.jquery.ui.dialog 官方位址 jquery.ui.dialog是乙個非常靈活的模式框,它的官方位址為 api 2.檔案引用 要使用jquery.ui.dialog,需要引用兩個檔案,1個是js,另外1個是css 在contentpage中新增 在masterpage中新增 3.使用...

JQuery定時自動消失提示框 彈出框

在表單提交中,不論成功與否,好的體驗都應該有彈出提示,效果 在頁面 顯示提示,1.5秒後消失,不影響頁面的正常布局。html 顯示提示內容,放在頁面中任何位置。alert alert success alert info alert warning alert danger 首先,載入jquery,...