css - 不滑动我的切换滑动按钮确认否
问题描述
我已经通过 CSS 设置了我的切换滑动按钮。但我也有一个关于滑动的警报弹出窗口。当用户滑动时,会弹出警报并要求用户确认。如果用户选择“是”,它会正确滑动。但是如果用户选择“取消”,它仍然会滑动。如果用户选择在警报框中取消,我如何设置我的 CSS 不滑动?
这是我的 CSS 和 HTML 代码的样子
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
top: 25px;
right: 65px;
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(66px);
-ms-transform: translateX(66px);
transform: translateX(66px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<tr>
<td>
<button type="button" class="btn btn-primary">HELLO
</button>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
</td>
</tr>
<tr>
<td>
<label class="switch">
<input type="checkbox">
<span class="slider round">
<span class="on">Enable</span>
<span class="off">Disable</span>
</span>
</label>
</td>
<td>
<label class="switch" onclick="confirm('Yes');">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</td>
</tr>
</body>
</html>
解决方案
单靠 CSS 无法解决这个问题,因为您想反转用户操作,您必须使用 JavaScript/jQuery。检查以下代码段
function confirmClick() {
var r = confirm("Press Cancel");
if (r !== true) {
document.getElementById('switchCheck').checked = !document.getElementById('switchCheck').checked
}
}
.switch {
top: 25px;
right: 65px;
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(66px);
-ms-transform: translateX(66px);
transform: translateX(66px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Toggle Switch</h2>
<tr>
<label class="switch" onchange="confirmClick();">
<input id="switchCheck" type="checkbox" checked>
<span class="slider round"></span>
</label>
</td>
</tr>
</body>
</html>
推荐阅读
- python - 如何线程化 mqtt 订阅和 socket.io 服务器
- c++ - String.length() 显示不正确的值
- javascript - 删除最后一项后无法重新渲染 FlatList 虽然使用了 extraData - React Native
- java - Spring无法创建bean
- laravel - Laravel 向注册用户发送电子邮件验证
- python - 基数为 10 的 int() 的文字:'testuser' 即使传递的参数是字符串
- r - R roxygen2:不在列表中显示函数
- java - 如何从包含自己的数组的对象数组中获取n条记录
- jquery - 根据 1 个输入的值自动填充多个输入的内容
- html - 仅当右侧有元素时如何在 HTML 元素中设置边距