Создайте прозрачный демонстрационный экран для веб-сайта

Question

У меня есть веб-сайт, на котором я добавляю новые функции и обязательным является то, что очень важно, чтобы пользователь и пользователь были уведомлены о новой кнопке, добавленной на странице, и это тоже очень чисто.

Итак, я посмотрел на Google и нашел chardin.js одно из решений. Но

Я хочу, чтобы страница выглядела как можно ниже

больше решений для этого? Если кто-то видел решение Флипкарта, то я буду любить его применять.

Answer 1

Один из способов сделать это - <div> с position: fixed;, opacity: 0.5; и z-index: 10.

Текст может быть добавлен в виде <p> с position: relative;. То же самое касается изображения (<img>).

С Javascript, это <div> можно скрыть после нажатия/щелчка.

Вам не нужен плагин для этого. Держите его просто :)

---

Вот рабочий пример: (. Посмотреть его в режиме Full Page)

document.getElementById("overlay").addEventListener("click", function(){ 
 
    this.style.display = "none"; 
 
});

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#overlay{ 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: lightgray; 
 
    opacity: 0.5; 
 
    z-index: 10; 
 
} 
 

 
#circle1{ 
 
    position: relative; 
 
    display: inline-block; 
 
    border: 3px solid red; 
 
    border-radius: 50%; 
 
    width: 200px; 
 
    height: 100px; 
 
    left: 30px; 
 
} 
 

 
#overlay p, #overlay img{ 
 
    position: relative; 
 
} 
 

 
#overlay p{ 
 
    color: blue; 
 
} 
 

 
#instruction1{ 
 
    top: 50px; 
 
    left: 400px; 
 
} 
 

 
#arrow1{ 
 
    width: 100px; 
 
    position: relative; 
 
    top: 100px; 
 
    left: 150px; 
 
} 
 

 
#instruction2{ 
 
    top: 100px; 
 
    left: 225px; 
 
} 
 

 
#dismiss{ 
 
    font-size: 12px; 
 
} 
 

 
main{ 
 
    z-index: 0; 
 
} 
 

 
main div{ 
 
    padding: 50px; 
 
    background: yellow; 
 
}

<div id="overlay"> 
 
    <div id="circle1"></div> 
 
    <p id="instruction1">This is some instruction.<br/> 
 
    <span id="dismiss">(tap to dismiss)</span> 
 
    </p> 
 
    <img id="arrow1" src="http://pixabay.com/static/uploads/photo/2013/07/13/10/13/arrow-156792_640.png" /> 
 
    <p id="instruction2">This is something cool!</p> 
 
</div> 
 

 
<main> 
 
    <div>This is my main content.</div> 
 
</main>