Luxup

Нативная кнопка закрытия для стики

May 30th, 2023
264
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.04 KB | None | 0 0
  1. Для HTML
  2. в начало HTML части
  3. <div class="wrapper" style="z-index: 10001 !important;">
  4. <input id="close-button" class="hidden-input" type="checkbox">
  5. <div class="inner">
  6. <label for="close-button" class="close-wrapper"></label>
  7.  
  8. В конце HTML части закрывающие теги
  9. </div>
  10. </div>
  11.  
  12. Добавить в CSS часть
  13. .hidden-input {
  14. height: 0;
  15. width: 0;
  16. position: absolute;
  17. opacity: 0;
  18. }
  19. .hidden-input:checked ~ .inner {
  20. display: none;
  21. }
  22. .close-wrapper {
  23. position: absolute;
  24. top: -28px;
  25. right: 0;
  26. width: 32px;
  27. height: 28px;
  28. background: url("data:image/svg+xml,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l8 8M1 9l8-8' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
  29. background-repeat: no-repeat;
  30. background-position: center;
  31. z-index: 3;
  32. border-radius: 6px 6px 0 0;
  33. background-color: rgba(0,0,0,.2);
  34. cursor: pointer;
  35. }
  36.  
  37.  
  38.  
Advertisement
Add Comment
Please, Sign In to add comment