基礎理解4:彈出層和拖動

来源:http://www.cnblogs.com/Believeme/archive/2016/06/16/5590112.html
-Advertisement-
Play Games

彈出層在網頁開發中經常用到,以前都是百度一下複製粘貼,從來沒有仔細看過也沒有理解原理. 直到有一天沒有網路,,,然後突然就想到了.這麼簡單為什麼會複製粘貼這麼久.總結如下: 1、有個大的div背景設個透明度opacity:0.5;filter:alpha(opacity=57),來個absolute ...


彈出層在網頁開發中經常用到,以前都是百度一下複製粘貼,從來沒有仔細看過也沒有理解原理.

直到有一天沒有網路,,,然後突然就想到了.這麼簡單為什麼會複製粘貼這麼久.總結如下:

   

1、有個大的div背景設個透明度opacity:0.5;filter:alpha(opacity=57),來個absolute或者fixed定位,最寬最高,z-index比覆蓋的頁面內容大。

   

2、做一個內容div也來個絕對定位,z-index更大一點設置一下喜歡的屬性耀眼的box-shadow等等

   

3、設置一個層把他倆包起來方便移除添加,點擊按鈕的時候就把獲取一下然後append到body,不需要就remove掉。如下所示:

   

<div id="modal">

<div class="layer">

</div>

<div class="content">

</div>

<div>

   

4、既然是彈出層就得要拖拽了,其實我用啥網站基本都沒拖拽過。第一次看到這個就會想到的是按下的時候記錄坐標,然後再拖動的時候實時計算然後設置彈窗的位置即可。有一點要註意就是火狐event事件問題var et =window.event || arguments.callee.caller.arguments[0];

   

效果如下:

   


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 實現tab切換的主要html代碼: 實現tab切換的jquery代碼: ...
  • 在之前項目後臺管理界面開發中,不知道有layer這樣好用的組件,我的內心是這樣的的。。。呀!這個框架有彈框,哈哈哈,好開心,不用自己寫遮罩層,不用自己寫彈框,好開森。。 當知道有layer之後。。。。。這麼方便,這麼人性化,好漂亮,哇哦,好簡單。。。 或許我這人看到新鮮的東西都叫好吧,不好的暫時沒發 ...
  • [1]一元加 [2]一元減 [3]遞增 [4]遞減 [5]加法 [6]減法 [7]乘法 [8]除法 [9]求餘 ...
  • 我們知道,JavaScript中檢測對象類型的運算符有:typeof、instanceof,還有對象的constructor屬性: 1) typeof 運算符 typeof 是一元運算符,返回結果是一個說明運算數類型的字元串。如:"number","string","boolean","object ...
  • div+css3實現漂亮的多動畫彩標簽雲,滑鼠移動會有動畫 點擊運行效果 ...
  • 因為我是前端剛入門,昨天看了一個大神寫的的初級前端需要掌握的知識,然後我就開始一一搜索,下麵是我對css預處理器和後處理器的搜索結果,一是和大家分享下這方面的知識,另一方面方便自己以後翻閱。所以感興趣的可以看下。 轉載自"趙雷的博客",原文地址:http://zhaolei.info/2014/01 ...
  • 今天要跟大家談的是事件冒泡,這個事件呢,也是兩面性的,有時候給我們帶來bug,有時候優點也很明顯。我們就一起來看看它的真面目。 首先看看事件冒泡是什麼? 事件冒泡 :當一個元素接收到事件的時候 會把他接收到的事件傳給自己的父級,一直到window 。(註意這裡傳遞的僅僅是事件 並不傳遞所綁定的事件函 ...
  • 1.Class類的介紹 在ES6中新增了Class類的概念,讓語法看起來更像是面向對象編程,其實這可以說是一個語法糖,ES5可以做到Class絕大部分功能,但也有一些不同。在ES6以前,可以通過構造函數來模擬類的概念,如下所示 在引入了Class關鍵字後,可以這樣做,如下所示 如上所示,便是ES6中 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...