Как изменить свойства CSS в одном элементе при выборе другого?

Question

Я знаю, что заголовок ужасно сформулирован, так что, надеюсь, я могу объяснить это ясно.

Я изменяю существующее расширение Google Chrome.Есть плавающая кнопка, определенная в файле .html как:

.button
{
    display: flex;
    color: #fff;
    font-size: 12px;
    font-family:  "Helvetica", "Arial", "sans-serif";
    text-align: center;
    margin: 0;
    width: 35px;
    height: 40px;
    float: right;
    border-radius: 40px 0 0 40px;
    box-shadow: 0 1px 5px -1px #333;
    cursor: pointer;
    opacity: 1;
    align-items: center;
    justify-content: center;
    border-right: none;
    background: #fff;
}

При нажатии этой кнопки в файле .js есть следующий код, который определяет, что должно произойти.

$(".button")
.fadeIn()
.click(function()
{
    if (color == "black")
    {
        do this
    }else if (color == "orange")
    {
        do that
    }else
    {
        or even this
    }
})

Моя цель - отобразить новое всплывающее окно в верхней части веб-сайта с информацией, учитывая, что color == "orange".Я могу настроить do this, do that и or even this для запуска, но мне бы очень хотелось, чтобы избежать выбора .button., чтобы я мог скрыть / показать другое всплывающее окно на экране без удаления / измененияКнопка.

Есть ли способ сделать это?Я полностью исчерпал свои знания html, css и js, я действительно только начинающий ...