Popup
This commit is contained in:
parent
2f09f1bae1
commit
483b8d48d2
65
popup.html
65
popup.html
|
@ -5,41 +5,68 @@
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 5px;
|
margin: 0;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div{
|
||||||
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div:first-child {
|
button {
|
||||||
margin-top: 0px;
|
border: none;
|
||||||
}
|
border-radius: 5px;
|
||||||
|
|
||||||
div {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 5px 3px;
|
padding: 5px 3px;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 1.4em;
|
font-size: 1em;
|
||||||
width: 110px;
|
width: 140px;
|
||||||
margin-top: 5px;
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enable {
|
||||||
|
color: #A43B00;
|
||||||
background: #FFE2BF;
|
background: #FFE2BF;
|
||||||
}
|
}
|
||||||
div:hover {
|
|
||||||
|
.enable:hover {
|
||||||
background: #FFD19A;
|
background: #FFD19A;
|
||||||
}
|
}
|
||||||
#enable {
|
|
||||||
border: 5px solid #FF8B00;
|
.disable {
|
||||||
color: #A43B00;
|
color: #fcf9fa;
|
||||||
|
background: #b2aeaf;
|
||||||
}
|
}
|
||||||
#disable {
|
|
||||||
border: 5px solid #FF8B00;
|
.disable:hover {
|
||||||
color: #A43B00;
|
background: #4c4b4c;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rule {
|
||||||
|
color: #4c4b4c;
|
||||||
|
background: #a5e569;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rule:hover {
|
||||||
|
background: #96d160;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="popup.js"></script>
|
<script src="popup.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="enable"><b>Enable</b></div>
|
<div>
|
||||||
<div id="disable"><b>Disable</b></div><br>
|
<button id="status" class="enable" onclick="changeStatus()">Global Enable</button><br>
|
||||||
<img src="icon128.png"></img>
|
<button id="exception" class="enable" onclick="handleException()">Enable on page</button><br>
|
||||||
|
<button id="rule">Add rule</button><br>
|
||||||
|
<img src="icon96.png"></img>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
30
popup.js
Normal file
30
popup.js
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
var status = "on";
|
||||||
|
var exception = "off";
|
||||||
|
|
||||||
|
function changeStatus(){
|
||||||
|
var element = document.getElementById('status');
|
||||||
|
var val = "Global Enable";
|
||||||
|
if(status == "on"){
|
||||||
|
val = " Global Disable";
|
||||||
|
status = "off";
|
||||||
|
element.className = "disable";
|
||||||
|
}else{
|
||||||
|
status = "on";
|
||||||
|
element.className = "enable";
|
||||||
|
}
|
||||||
|
element.innerHTML = val;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleException(){
|
||||||
|
var element = document.getElementById('exception');
|
||||||
|
var val = "Enable on page";
|
||||||
|
if(exception == "off"){
|
||||||
|
val = "Disable on page";
|
||||||
|
exception = "on";
|
||||||
|
element.className = "disable";
|
||||||
|
}else{
|
||||||
|
exception = "off";
|
||||||
|
element.className = "enable";
|
||||||
|
}
|
||||||
|
element.innerHTML = val;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user