use this code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
background-color: black;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.lock{
max-height:400px;width:90%;margin:auto;border:1px solid #ddd;overflow:hidden;
}
</style>
</head>
<body>
<div id="wrapper" class="">
<Button id="btnLock" onclick="GetLock()">Get Lock</Button>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>Edit the code in the window to the left, and click "Run" to view the result.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>Edit the code in the window to the left, and click "Run" to view the result.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>Edit the code in the window to the left, and click "Run" to view the result.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>Edit the code in the window to the left, and click "Run" to view the result.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">
</div>
<script>
var lock=false;
function GetLock()
{
if(lock)
{
var element = document.getElementById("wrapper");
element.classList.remove("lock");
lock=false;
}
else
{
var element = document.getElementById("wrapper");
element.classList.add("lock");
lock=true;
}
}
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
