博客網(wǎng)站添加復(fù)制轉(zhuǎn)載提醒彈窗Html代碼

站如果是完全禁止右鍵（復(fù)制、另存為等）操作，對(duì)用戶來(lái)說(shuō)體驗(yàn)感會(huì)降低，但是又不希望自己的原創(chuàng)內(nèi)容直接被copy，今天飛飛和你們分享幾行復(fù)制轉(zhuǎn)載提醒彈窗Html代碼。

效果展示：

復(fù)制以下代碼，將其放在網(wǎng)站footer.php或者h(yuǎn)eader.php任意底部位置即可。

document.body.oncopy = function() {

swal("復(fù)制成功！", "若要轉(zhuǎn)載請(qǐng)保留原文鏈接，感謝支持！", "success");

};

</script>

通過(guò)這幾行代碼，我們可以在保護(hù)原創(chuàng)內(nèi)容的同時(shí)，不影響用戶體驗(yàn)。當(dāng)然，除了添加復(fù)制轉(zhuǎn)載提醒彈窗之外，我們還可以通過(guò)其他方式來(lái)保護(hù)原創(chuàng)內(nèi)容，例如添加水印、限制轉(zhuǎn)載等等。總之，在權(quán)衡用戶體驗(yàn)和版權(quán)保護(hù)時(shí)，我們需要尋找一個(gè)平衡點(diǎn)，既能夠保護(hù)自己的權(quán)益，又不會(huì)影響用戶的使用體驗(yàn)。

感謝您的閱讀，服務(wù)器大本營(yíng)助您成為更專業(yè)的服務(wù)器管理員！

先來(lái)了解一下什么是模態(tài)彈窗？

模態(tài)彈窗會(huì)打斷用戶的操作行為，強(qiáng)制用戶必須進(jìn)行操作，否則不可以進(jìn)行其他操作。看看模態(tài)彈窗都長(zhǎng)啥樣吧！

一、常見(jiàn)的網(wǎng)頁(yè)模態(tài)彈窗

第1種彈窗提示信息，只有一個(gè)確認(rèn)按鈕，只有提示的作用。有返回值，但返回結(jié)果一般不太重要。

alert的彈窗

第2種彈窗選擇按鈕，讓用戶選擇確定或取消，然后會(huì)進(jìn)入到不同的處理步驟，需要有返回值。

第3種彈窗輸入內(nèi)容，向用戶提問(wèn)，并要求在彈窗中輸入文字，然后返回輸入的內(nèi)容。

二、某些瀏覽器提供禁止模態(tài)彈窗功能，直接在瀏覽器設(shè)置中修改即可，甚至還可以自動(dòng)返回值，使操作不因彈窗而中斷。

三、彈窗一般都是由javascript代碼產(chǎn)生的，在項(xiàng)目管理器中可以設(shè)置禁用javascript，這樣彈窗代碼將不會(huì)被執(zhí)行了，不彈窗也不存在返回值，會(huì)影響所有javascript腳本執(zhí)行。但它不會(huì)影響項(xiàng)目管理器中的javascript代碼執(zhí)行。

四、自動(dòng)檢測(cè)模態(tài)彈窗，并關(guān)閉彈窗。這種方法適用于所有的第三方程序窗口，可以控制瀏覽器以外的應(yīng)用程序窗口。設(shè)定檢測(cè)頻率，按窗口標(biāo)題識(shí)別彈窗，可以強(qiáng)制關(guān)閉彈窗或向彈窗發(fā)送鍵盤(pán)事件。使用這種方法時(shí)，彈窗最多存活一個(gè)檢測(cè)周期，往往一閃而過(guò)。

五、重載彈窗函數(shù)Alert，如下圖所示，不但可以阻止彈窗，還可以獲得彈窗顯示的內(nèi)容。

六、重載confirm函數(shù)，如下圖所示，不但可以阻止彈窗，還可以直接選擇確定還是取消。

七、重載prompt函數(shù)，如下圖所示，不但可以阻止彈出輸入框，還可以把輸入的內(nèi)容直接寫(xiě)在代碼中。

是把彈窗的html都寫(xiě)在了頁(yè)面app里邊。

圖1 點(diǎn)擊確認(rèn)，隱藏彈窗

圖2 點(diǎn)擊取消隱藏彈窗點(diǎn)擊確認(rèn)執(zhí)行其他操作

1、html代碼

<div class="layui-body"  id="app">
  <div  ><button  @click="queren">顯示確認(rèn)框</button><button  @click="qshanchu">顯示刪除框</button></div>
  <div class='zzc none'  :class="{'nonone':showzzc==1}">
  <div class='confir' v-show="showts==1">
    <h3>溫馨提示</h3>
	<p>確認(rèn)要?jiǎng)h除嗎？</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">確認(rèn)</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">確認(rèn)</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直接設(shè)置background-color透明度，background-color:rgba(221,221,221,0.7)，0.7即為透明度

3、js代碼

 new Vue({
    el: '#app',
    data(){
		return {
		  tis:'',           //提示內(nèi)容
		  showzzc:0,         //彈出框的顯示，隱藏 。0 隱藏  1顯示
		  showts:0,          //1 彈出提示操作框  2 彈出提示確認(rèn)框 
		 }
    },
    methods:{
    	  hidetc:function(){
		        this.showzzc=0;
	      },
        isdelc:function(){
			    //這里是刪除的操作
			    this.showzzc=0;//賦值為0， 隱藏彈出框
	      },
	      queren:function(){
		      this.showzzc=1;
		      this.showts=2;
		      this.tis="你點(diǎn)擊了顯示確認(rèn)框";
	      },

	      qshanchu:function(){
		      this.showzzc=1;
		      this.showts=1;
	      },
    }
  })

說(shuō)明：

在1中可以看到使用的<div class='zzc none' :class="{'nonone':showzzc==1}"> 操作的是class ，而不是使用v-if 或者v-show，這是因?yàn)関ue是在最后渲染，如果不加none，打開(kāi)頁(yè)面的時(shí)候，窗口有一個(gè)閃現(xiàn)的過(guò)程，這很明顯不是我們想要的效果，如果加上none，v-if，v-show 就失去了作用；
nonone 加上!important ，優(yōu)先級(jí)高于none，讓class='none'，失去了作用，達(dá)到我們想要的顯示隱藏的效果；
彈窗可能提示的內(nèi)容不同，提示的信息直接讀取基礎(chǔ)數(shù)據(jù)tis的信息，例如：上傳圖片，可能會(huì)提示大小超出，格式不對(duì)；
360急速瀏覽器在兼容模式下，vue都失效，沒(méi)有解析；

解決辦法如下：

第一步：在頭部加載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的代碼寫(xiě)在了art.js，主要就是判斷是否ie，然后決定是否加上 type="text/babel"，如果不是ie，加上以后別的瀏覽器就不好用了。

在線咨詢

上一篇：HTML input 文本框添加提示文字的方法
下一篇：KT6368A藍(lán)牙芯片雙模用戶手冊(cè)_V2.0

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

博客網(wǎng)站添加復(fù)制轉(zhuǎn)載提醒彈窗Html代碼

您的項(xiàng)目需求