javascript - 如何模糊网站而不使网站 "clickable"？

Question

我创建了一个这样的 if 语句:

if (lehrling == null)
{
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Bitte überprüfen Sie Ihren URL Key');", true);
    //Blur Website
    //Disable Website
}

如果陈述为真，则会显示警报。我还想模糊网站，不使其可点击...所以你无法访问网站的任何内容。当我点击警报消息消失时，网站应该关闭......

我怎样才能做到这一点？有没有好的js方法可以做到这一点？也许是jquery？

Answer 1

有关阻止用户访问的说明

如果您希望某些用户不打开网站，如果他们的访问被拒绝，那么对网站进行模糊处理并不是最佳做法，因为用户将能够通过以下方式查看网页源或删除模糊处理:开发者工具。为此，您应该在服务器端将用户重定向到拒绝访问的页面。在 PHP 中，你可以这样做

if($denied == true) { header("Location: /access-denied.html"); }

或

if($denied == true) { die('You cannot access this page because...'); }

或者甚至根据需要显示警报框并关闭窗口，而不显示页面，因为正如我所说，向您不想访问该页面的用户提供源代码是一种不好的做法.

但是，模糊网站(一般示例)

读完我的笔记后，如果您仍然想这样做，我在一开始就创建了一个一般情况的示例，以便能够看到演示(您的特定代码，修改后，可以可以在答案的底部找到)。 在演示模式下，窗口不会关闭。

  $("#blur").click(function() {
    $('body').addClass('blur_site');
    alert("Good bye!");
    window.close();
  });

.blur_site {
    filter: blur(1px);
    -webkit-filter: blur(1px);
    -o-filter: blur(2px);
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
    pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="blur">Blur</button>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate dui eu massa volutpat laoreet. Suspendisse tincidunt mi sed dui egestas, quis euismod metus lacinia. Phasellus at dui odio. Etiam tempor egestas ligula ut hendrerit. Pellentesque arcu mi, mollis vel tincidunt ut, fermentum ac felis. Ut posuere libero ut erat vestibulum vulputate. Sed dolor turpis, imperdiet nec lorem sed, hendrerit vulputate nunc. Suspendisse potenti. Donec ut mi at dolor rutrum pretium. Vivamus nec volutpat ipsum. Nam tincidunt sagittis pharetra. Fusce consectetur nibh sapien, ac dignissim libero elementum eu.
</div>
<p>
Nam id fermentum nisi. Fusce venenatis ligula non pretium commodo. Proin enim mi, mattis quis augue ut, volutpat sollicitudin ligula. Vivamus in congue purus, eget bibendum nisi. Cras dignissim sit amet magna et malesuada. Proin sem lacus, volutpat pretium maximus vitae, varius a enim. Etiam laoreet a lacus et accumsan. Cras porttitor porta velit ut faucibus.
</p>
<b>
Maecenas vulputate dui eu risus porttitor, pellentesque dictum orci mollis. Praesent ac arcu nisl. Sed purus sapien, ultricies at aliquam id, hendrerit dignissim mauris. Nullam et ante porta, finibus sapien vitae, sagittis felis. Pellentesque luctus urna sit amet lorem sodales, eu aliquam mi placerat. In quis viverra erat, non blandit risus. Etiam ornare nisi justo, a volutpat quam molestie sit amet. Nulla nec bibendum magna, non accumsan justo. Sed imperdiet quam at felis luctus, non tempor massa consectetur.

Suspendisse a justo id dui finibus volutpat id id lorem. Curabitur eu dui vitae nulla varius venenatis. Morbi neque erat, euismod ut facilisis eu, pellentesque vitae elit. In hac habitasse platea dictumst. Donec purus ante, hendrerit eu maximus nec, ullamcorper ac nisl. Ut euismod eros ac lacus efficitur, vitae faucibus tellus lobortis. Integer viverra mauris ut tellus efficitur tincidunt sit amet vel dolor. Sed lacinia est vel ipsum pharetra, ut iaculis dui fermentum. Nam id nulla vitae ligula elementum euismod ac eget libero. Sed bibendum diam ut magna tempor, quis ultrices sapien placerat.

Pellentesque consectetur ex lorem, sed eleifend nunc tincidunt et. Ut at tellus feugiat orci accumsan ornare. Phasellus posuere arcu non urna consequat blandit. Praesent interdum sagittis lorem, sed congue elit. Duis vestibulum tempor lorem, at dapibus arcu finibus quis. Donec mauris mauris, egestas et ex vel, facilisis blandit nisl. Phasellus sit amet dictum tellus, vel dictum metus. Suspendisse placerat nisl mattis dolor consequat, at rhoncus magna pellentesque. Donec aliquet massa nec aliquet tempus. Cras eget venenatis nisl, eget posuere quam. Vestibulum maximus eu dui dignissim vestibulum. Pellentesque auctor purus et risus auctor, at accumsan erat pulvinar.
</b>

模糊网站(修改了您的原始代码)

if (lehrling == null)
{
    $('body').addClass('blur_site');
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Bitte überprüfen Sie Ihren URL Key');", true);
    window.close();
}

并将其添加到您的 CSS 中:

.blur_site {
    filter: blur(1px);
    -webkit-filter: blur(1px);
    -o-filter: blur(2px);
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
    pointer-events: none;
}

请注意，此代码使用 JQuery。