我创建了一个名为“受众人口统计”的模态框,模态框内部是一组主要类型,它们打开了另一个包含我的子流派的模态框。
问题在于,当用户单击主要体裁(例如,人口统计学)时,在下一个模式框打开之前,短暂地,主要体裁(例如,人口统计学)会很快将字体颜色更改为红色。
现在,在我的任何主要流派期间,字体颜色都不应更改。
此外,即使我在html元素中手动实现了color:white代码,子类的字体颜色似乎也没有改变(子类应该是白色,蓝色)。
请问我有什么问题的帮助。
// maintains a sticky pop up (original code)
$('a[href="#ex6-1b"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
});
// allows mutliple modals
var content = "";
$('a[href="#ex6-2bc"],a[href="#ex6-2b"],a[href="#ex6-3b"]').click(function(event) {
event.preventDefault();
$(this).modal({
closeExisting: true,
escapeClose: false,
clickClose: false,
showClose: false,
});
$('input[type=checkbox]').prop('checked', false);
});
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: white
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
input:focus {
outline: none;
}
.your-divs {
float: right;
bottom: 0;
right: 0;
position: absolute;
padding-right: 30px;
padding-bottom: 15px;
margin-bottom: 0px;
font-size: 16px
}
.blackBox {
border-style: solid;
border-color: black;
background-color: black;
margin-bottom: 3px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 7px;
font-family: nunito;
font-size: 14px;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="blackBox" data-name="audience">
<a class="btn" href="#ex6-1b" style="color:white"> <b> Audience Demographics </b> </a>
</div>
<div class="modal" id="ex6-1b" style="display:none; background-color:black">
<div style="float:left;">
<div style="line-height:1.8; font-size:16px; color:white; text-transform:uppercase">
<p> <a href="#ex6-2bc"><b>Demographics</b></a> </p>
<p> <a href="#ex6-2b"><b>LGBTQ</b></a> </p>
<p> <a href="#ex6-3b"><b>BAME</b></a> </p>
</div>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese;"> <b>Return</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-2bc" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group19"> <label for="group19" class="onlyThese" name="male"> <b> Cis Male </b> </label> </p>
<p> <input type="checkbox" id="group29"> <label for="group29" class="onlyThese" name="female"> <b> Cis Female </b> </label> </p>
<p> <input type="checkbox" id="group39"> <label for="group39" class="onlyThese" name="non-binary"> <b> Non Binary </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-2b" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group10"> <label for="group10" class="onlyThese" name="gay"> <b> Gay </b> </label> </p>
<p> <input type="checkbox" id="group20"> <label for="group40" class="onlyThese" name="lesbian"> <b> Lesbian </b> </label> </p>
<p> <input type="checkbox" id="group30"> <label for="group30" class="onlyThese" name="bisexual"> <b> Bisexual </b> </label> </p>
<p> <input type="checkbox" id="group40"> <label for="group40" class="onlyThese" name="bisexual"> <b> Transgender </b> </label> </p>
<p> <input type="checkbox" id="group50"> <label for="group50" class="onlyThese" name="queer_non_conforming"> <b> Queer Non-Conforming </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-3b" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group11"> <label for="group11" class="onlyThese" name="mix_multiple_ethic"> <b> Mixed / Multiple Ethnic </b> </label> </p>
<p> <input type="checkbox" id="group22"> <label for="group22" class="onlyThese" name="asian_british_asian"> <b> Asian / British Asian </b> </label> </p>
<p> <input type="checkbox" id="group33"> <label for="group33" class="onlyThese" name="black_african_caribbean"> <b> Black African / Black Caribbean </b> </label> </p>
<p> <input type="checkbox" id="group44"> <label for="group44" class="onlyThese" name="other_ethic_group"> <b> Other Ethnic Group </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>
答案 0 :(得分:2)
红色是活动链接的默认
添加
a:visited { color:yellow }
a:active { color:pink }
如果您想更改颜色
// maintains a sticky pop up (original code)
$('a[href="#ex6-1b"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
});
// allows mutliple modals
var content = "";
$('a[href="#ex6-2bc"],a[href="#ex6-2b"],a[href="#ex6-3b"]').click(function(event) {
event.preventDefault();
$(this).modal({
closeExisting: true,
escapeClose: false,
clickClose: false,
showClose: false,
});
$('input[type=checkbox]').prop('checked', false);
});
a:visited { color:yellow }
a:active { color:pink }
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: white
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
input:focus {
outline: none;
}
.your-divs {
float: right;
bottom: 0;
right: 0;
position: absolute;
padding-right: 30px;
padding-bottom: 15px;
margin-bottom: 0px;
font-size: 16px
}
.blackBox {
border-style: solid;
border-color: black;
background-color: black;
margin-bottom: 3px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 7px;
font-family: nunito;
font-size: 14px;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="blackBox" data-name="audience">
<a class="btn" href="#ex6-1b" style="color:white"> <b> Audience Demographics </b> </a>
</div>
<div class="modal" id="ex6-1b" style="display:none; background-color:black">
<div style="float:left;">
<div style="line-height:1.8; font-size:16px; color:white; text-transform:uppercase">
<p> <a href="#ex6-2bc"><b>Demographics</b></a> </p>
<p> <a href="#ex6-2b"><b>LGBTQ</b></a> </p>
<p> <a href="#ex6-3b"><b>BAME</b></a> </p>
</div>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese;"> <b>Return</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-2bc" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group19"> <label for="group19" class="onlyThese" name="male"> <b> Cis Male </b> </label> </p>
<p> <input type="checkbox" id="group29"> <label for="group29" class="onlyThese" name="female"> <b> Cis Female </b> </label> </p>
<p> <input type="checkbox" id="group39"> <label for="group39" class="onlyThese" name="non-binary"> <b> Non Binary </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-2b" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group10"> <label for="group10" class="onlyThese" name="gay"> <b> Gay </b> </label> </p>
<p> <input type="checkbox" id="group20"> <label for="group40" class="onlyThese" name="lesbian"> <b> Lesbian </b> </label> </p>
<p> <input type="checkbox" id="group30"> <label for="group30" class="onlyThese" name="bisexual"> <b> Bisexual </b> </label> </p>
<p> <input type="checkbox" id="group40"> <label for="group40" class="onlyThese" name="bisexual"> <b> Transgender </b> </label> </p>
<p> <input type="checkbox" id="group50"> <label for="group50" class="onlyThese" name="queer_non_conforming"> <b> Queer Non-Conforming </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>
<div class="modal" id="ex6-3b" style="display:none; background-color:black">
<div style="line-height:1.8; font-size:16px">
<p> <input type="checkbox" id="group11"> <label for="group11" class="onlyThese" name="mix_multiple_ethic"> <b> Mixed / Multiple Ethnic </b> </label> </p>
<p> <input type="checkbox" id="group22"> <label for="group22" class="onlyThese" name="asian_british_asian"> <b> Asian / British Asian </b> </label> </p>
<p> <input type="checkbox" id="group33"> <label for="group33" class="onlyThese" name="black_african_caribbean"> <b> Black African / Black Caribbean </b> </label> </p>
<p> <input type="checkbox" id="group44"> <label for="group44" class="onlyThese" name="other_ethic_group"> <b> Other Ethnic Group </b> </label> </p>
</div>
<div class="your-divs">
<p style="color:white; text-transform:uppercase">
<a href="#" rel="modal:close" class="onlyThese"> <b>Apply</b></a>
</p>
</div>
</div>