如何模糊网站而不使网站"clickable"?



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

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

如果语句为真,则显示警告。我还想模糊网站,不让它可点击…所以你不能访问网站的任何内容。当我点击警告信息时,网站应该关闭....

我怎么能做到这一点?有什么好的js方法来做到这一点吗?也许jquery ?

禁止访问用户的注意事项

如果你想让网站不被某些用户打开,如果他们被拒绝访问,那么模糊网站并不是一个最佳实践,因为用户将能够看到网页源代码或通过开发工具删除模糊。为此,您应该将用户重定向到服务器端拒绝访问的页面。在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

一个可能的直接解决方案。

var dialog = $("div.Curtain");
function showDialog(content) {
  $("div#DialogContent", dialog).html(content);
  dialog.show();
}
$("div.Dialog").on("click", "a.Button", function(e) {
  e.preventDefault();
  
  var button = $(this);
  if (button.attr("id") == "CancelButton")
    dialog.hide();
  else
    alert("redirect somewhere or do other staff");
    
});
html, body {
  width: 100%;
  height: 100%;
}
div.Curtain {
  z-index: 1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .3);
  display: none;
}
div.Dialog {
  position: fixed;
  z-index: 2;
  width: 300px;
  background: white;
  padding: 40px;
}
div.Dialog a.Button {
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: cente;
  margin: 10px;
  background: blue;
  color: white;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  This is the content of the website.
  
  <a href="javascript:showDialog('dialog content');">show the dialog</a>
</div>
<div class="Curtain">
  <div class="Dialog">
    <!--A way can be to put the content of the dialog in a hidden div and showing it in front of a curtain when done.-->
    
    <div id="DialogContent"></div>
  
    <a class="Button" href="#" id="OkButton">Ok</a>
    <a class="Button" href="#" id="CancelButton">Cancel (redirect)</a>
  </div>
</div>

你可以使用JQuery或Bootstrap这样的框架来使用它们的模态窗口来实现这一点。与Javascript结合使用,你也可以关闭当前的浏览器窗口。

  • 引导模式示例:http://www.w3schools.com/bootstrap/bootstrap_modal.asp
  • Jquery模式示例:https://jqueryui.com/dialog/#modal-message
  • Javascript关闭浏览器:window.close();

这就是你需要的所有信息。成功!