站如果是完全禁止右键(复制、另存为等)操作,对用户来说体验感会降低,但是又不希望自己的原创内容直接被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小时内与您取得联系。