整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
站如果是完全禁止右鍵（復制、另存為等）操作，對用戶來說體驗感會降低，但是又不希望自己的原創內容直接被copy，今天飛飛和你們分享幾行復制轉載提醒彈窗Html代碼。
效果展示：
復制以下代碼，將其放在網站footer.php或者header.php任意底部位置即可。
<!-- 復制提醒開始 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
document.body.oncopy = function() {
swal("復制成功！", "若要轉載請保留原文鏈接，感謝支持！", "success");
};
</script>
<!-- 復制提醒結束 -->
通過這幾行代碼，我們可以在保護原創內容的同時，不影響用戶體驗。當然，除了添加復制轉載提醒彈窗之外，我們還可以通過其他方式來保護原創內容，例如添加水印、限制轉載等等。總之，在權衡用戶體驗和版權保護時，我們需要尋找一個平衡點，既能夠保護自己的權益，又不會影響用戶的使用體驗。
感謝您的閱讀，服務器大本營助您成為更專業的服務器管理員！
先來了解一下什么是模態彈窗？
模態彈窗會打斷用戶的操作行為，強制用戶必須進行操作，否則不可以進行其他操作。看看模態彈窗都長啥樣吧！
一、常見的網頁模態彈窗
第1種彈窗提示信息，只有一個確認按鈕，只有提示的作用。有返回值，但返回結果一般不太重要。
alert的彈窗
第2種彈窗選擇按鈕，讓用戶選擇確定或取消，然后會進入到不同的處理步驟，需要有返回值。
第3種彈窗輸入內容，向用戶提問，并要求在彈窗中輸入文字，然后返回輸入的內容。
二、某些瀏覽器提供禁止模態彈窗功能，直接在瀏覽器設置中修改即可，甚至還可以自動返回值，使操作不因彈窗而中斷。
三、彈窗一般都是由javascript代碼產生的，在項目管理器中可以設置禁用javascript，這樣彈窗代碼將不會被執行了，不彈窗也不存在返回值，會影響所有javascript腳本執行。但它不會影響項目管理器中的javascript代碼執行。
四、自動檢測模態彈窗，并關閉彈窗。這種方法適用于所有的第三方程序窗口，可以控制瀏覽器以外的應用程序窗口。設定檢測頻率，按窗口標題識別彈窗，可以強制關閉彈窗或向彈窗發送鍵盤事件。使用這種方法時，彈窗最多存活一個檢測周期，往往一閃而過。
五、重載彈窗函數Alert，如下圖所示，不但可以阻止彈窗，還可以獲得彈窗顯示的內容。
六、重載confirm函數，如下圖所示，不但可以阻止彈窗，還可以直接選擇確定還是取消。
七、重載prompt函數，如下圖所示，不但可以阻止彈出輸入框，還可以把輸入的內容直接寫在代碼中。
是把彈窗的html都寫在了頁面app里邊。
圖1 點擊確認，隱藏彈窗
圖2 點擊取消隱藏彈窗 點擊確認執行其他操作
1、html代碼
<div class="layui-body" id="app">
<div ><button @click="queren">顯示確認框</button><button @click="qshanchu">顯示刪除框</button></div>
<div class='zzc none' :class="{'nonone':showzzc==1}">
<div class='confir' v-show="showts==1">
<h3>溫馨提示</h3>
<p>確認要刪除嗎？</p>
<div class='del-btn-item'>
<dl>
<dd>
<button type='button' class='confire_btn_no' @click="hidetc">取消</button>
<button type='button' class='confire_btn_yes' @click="isdelc">確認</button>
</dd>
</dl>
</div>
</div>
<div class='confir' v-show="showts==2">
<h3>溫馨提示</h3>
<p>{{tis}}</p>
<div class='del-btn-item'>
<dl>
<dd>
<button type='button' class='confire_btn_yes_full confire_btn_yes' @click="hidetc">確認</button>
</dd>
</dl>
</div>
</div>
</div>
</div>2、css代碼
.zzc{position:fixed;width:100%;height:100%;z-index:111111;background-color:rgba(221,221,221,0.7);left:0;top:0;}
.zzc .confir{position:fixed;border:2px solid #009688;z-index:222222;background: #FFF;left:50%;top:50%;border-radius:5px;width:350px;height:200px;margin-left:-175px;margin-top:-100px;}
.zzc .confir h3{width:100%;text-indent:10px;font-size:16px;height:40px;line-height:40px;border-bottom:1px solid #DDD;}
.confir p{background:url(../images/icon_exc_small.gif) no-repeat 30px center;height:80px;line-height:80px;display:block;width:100%;text-indent:120px;font-size:16px;}
.confir button{font-size:14px;padding:10px 30px;margin:0 5px;border:0;cursor:pointer;}
.confir .confire_btn_no{background:#F2F2F2;}
.confir .confire_btn_yes{background:#009688;color:#FFF;}
.confir .del-btn-item{margin-top:20px;}
.confir .del-btn-item dd{text-align:center;}
.confir .confire_btn_yes_full{width:calc(100% - 60px);margin:0 auto;}
.none{display:none;}
.nonone{display:block !important}使用rgba直接設置background-color透明度，background-color:rgba(221,221,221,0.7)，0.7即為透明度
3、js代碼
new Vue({
el: '#app',
data(){
return {
tis:'', //提示內容
showzzc:0, //彈出框的顯示，隱藏 。0 隱藏 1顯示
showts:0, //1 彈出提示操作框 2 彈出提示確認框
}
},
methods:{
hidetc:function(){
this.showzzc=0;
},
isdelc:function(){
//這里是刪除的操作
this.showzzc=0;//賦值為0， 隱藏彈出框
},
queren:function(){
this.showzzc=1;
this.showts=2;
this.tis="你點擊了顯示確認框";
},
qshanchu:function(){
this.showzzc=1;
this.showts=1;
},
}
})說明：
解決辦法如下：
第一步：在頭部加載browser.min.js，
第二步：判斷瀏覽器是否為ie瀏覽器
第三步：如果是ie，在vue的<script>處加上type="text/babel"
完整代碼：
<script type="text/javascript" >
if (!!window.ActiveXObject || "ActiveXObject" in window){
document.write("<scri"+"pt src=\"/public/admin/js/art.js\" type=\"text/babel\"></s"+"cript>");
}else{
document.write("<scri"+"pt src=\"/public/admin/js/art.js\" ></s"+"cript>");
}
</script>我的vue的代碼寫在了art.js，主要就是判斷是否ie，然后決定是否加上 type="text/babel"，如果不是ie，加上以后別的瀏覽器就不好用了。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
