博客網站添加復制轉載提醒彈窗Html代碼

站如果是完全禁止右鍵（復制、另存為等）操作，對用戶來說體驗感會降低，但是又不希望自己的原創內容直接被copy，今天飛飛和你們分享幾行復制轉載提醒彈窗Html代碼。

效果展示：

復制以下代碼，將其放在網站footer.php或者header.php任意底部位置即可。

document.body.oncopy = function() {

swal("復制成功！", "若要轉載請保留原文鏈接，感謝支持！", "success");

};

</script>

通過這幾行代碼，我們可以在保護原創內容的同時，不影響用戶體驗。當然，除了添加復制轉載提醒彈窗之外，我們還可以通過其他方式來保護原創內容，例如添加水印、限制轉載等等。總之，在權衡用戶體驗和版權保護時，我們需要尋找一個平衡點，既能夠保護自己的權益，又不會影響用戶的使用體驗。

感謝您的閱讀，服務器大本營助您成為更專業的服務器管理員！

是否有看到有的網站進入網站就會彈出網站公告提示框，今天飛飛和你們分享打開網站就彈出網站公告提示框的JS彈窗代碼，希望可以幫到你~

直接復制JS代碼，粘貼到首頁文件，或者需要彈出的頁面即可

次在講css實現tab切換時，有童靴留言說可以使用錨點實現，對的，就是可以使用錨點，然而，使用錨點涉及到的又有哪些關鍵技術了？今天我們以錨點實現彈窗為例來解答這個問題

一句話總結實現原理就是：a標簽改變hash值觸發css3偽類target作用對應id的dom元素。

一：講清楚:target怎么作用的

：target是CSS里一個非常有趣的偽選擇器。它在CSS里發生作用的過程是這樣的：當瀏覽器地址里的hash（地址#號后面的部分）和：target偽選擇器指定的ID匹配上時，它的樣式就會在這個ID元素上生效。

實例dom結構：

dom結構比較簡單，兩個帶href為#id的a標簽，以及兩上對應#id后面id值作為自己id的p標簽。下面我們給偽元素定義一個樣式：

然后，我們點擊#news1時p#news1元素對這個樣式生效，點擊#news2時p#news2元素對這個樣式生效。（結論是：target選擇器會突出顯示當前活動的HTML錨）效果是這樣的：

好了，以上實現就是為了說明偽元素是這樣作用的，記住上面加粗語句就行了。下面來實現我們本篇要講的主題—錨點實現彈窗

知道target是怎么作用的了，那下面這個彈窗功能就好實現了。

實現的dom結構：

由上圖可知，兩個帶href#id的a標簽，和兩個id等于#id的dom結構。運行效果是這樣的：

給target偽類定義樣式：

這個樣式的作用是將dom從不顯示變成顯示。

當我們點擊“點擊我”按鈕時，通過錨點改變hash值在通過偽類target將id="popup1"的dom添加偽類定義的樣式。結果是這樣的：

當點擊浮層上的叉時，關閉這個浮層，原理也是一樣的（改變hash引起偽類失效）。

當我們點擊“也點擊我嘛”按鈕時，同樣通過錨點改變hash值在通過偽類target將id="popup2"的dom添加偽類定義的樣。效果是這樣的：

只是這種情況將設置關閉的div.cancel設置成了全局寬度，層級在浮層下。所以通過點擊浮層外的區域就關閉了浮層，關閉原理是一樣的。

CSS3的target這個屬性，雖然所有的主流瀏覽器都支持，除了IE8及以下的版本，但是現在使用這種技術的人還是比較少，其實，如果不是太注重動態效果，使用這種瀏覽器原生技術來修飾你的應用也是不錯的選擇。

短內容，說完整事，哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！

*請認真填寫需求信息，我們會在24小時內與您取得聯系。