添加样式 HTML JS

huangapple
go评论89阅读模式
英文:

adding style html js

问题

看我的下面的截图。 如果我删除这个属性，聊天框将不会打开。 我尝试使用CSS删除它，然后使用jquery/js将其添加回来，但不起作用。 如何解决这个问题？ 使"div"在关闭格式之前不会覆盖我的背景。

enter image description here

我希望在它打开之前它是关闭的。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. function chatInit(selector) {
  5.   document.addEventListener('DOMContentLoaded', () => {
  6.     if (!window.LIVE_CHAT_UI) {
  7.       let chat = document.querySelector(selector);
  8.       let toggles = chat.querySelectorAll('.toggle')
  9.       let close = chat.querySelector('.close')
  11.       toggles.forEach( toggle => {
  12.         toggle.addEventListener('click', () => {
  13.           chat.classList.add('is-active')
  14.         })
  15.       })
  16.       close.addEventListener('click', () => {
  17.         chat.classList.remove('is-active')
  18.       })    
  20.       window.LIVE_CHAT_UI = true
  21.     }
  22.   })
  23. }
  25. chatInit('#chat-app')
  27. <!-- language: lang-css -->
  28. /* 这里是CSS部分，暂不提供翻译 */
  30. <!-- language: lang-html -->
  31. <!-- 这里是HTML部分，暂不提供翻译 -->
  33. <!-- end snippet -->

希望这对你有帮助。如果有任何其他问题，请随时告诉我。

英文:

Look at my screenshot below. If I remove this property the chat will not open. I tried with CSS to remove it and then use jquery/js to add it back, but it doesn't work. How can I solve this problem? That the "div" in closed format would not cover my background

enter image description here

I want it to be closed before it opens<br>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function chatInit(selector) {
  2.   document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
  3.     if (!window.LIVE_CHAT_UI) {
  4.       let chat = document.querySelector(selector);
  5.       let toggles = chat.querySelectorAll(&#39;.toggle&#39;)
  6.       let close = chat.querySelector(&#39;.close&#39;)
  7.       
  8.       toggles.forEach( toggle =&gt; {
  9.         toggle.addEventListener(&#39;click&#39;, () =&gt; {
  10.           chat.classList.add(&#39;is-active&#39;)
  11.         })
  12.       })
  13.       close.addEventListener(&#39;click&#39;, () =&gt; {
  14.         chat.classList.remove(&#39;is-active&#39;)
  15.       })    
  16.       
  17.       window.LIVE_CHAT_UI = true
  18.     }
  19.   })
  20. }
  22. chatInit(&#39;#chat-app&#39;)

<!-- language: lang-css -->

  1. *,
  2. *:after,
  3. *:before {
  4. box-sizing: border-box;
  5. }
  6. .chat-app {
  7. font-size: 18px;
  8. line-height: 1.25;
  9. font-family: &quot;Roboto&quot;, sans-serif;
  10. height: 600px;
  11. width: 360px;
  12. position: fixed;
  13. bottom: 32px;
  14. right: 32px;
  15. color: #141E30;
  16. }
  17. .chat-app .title {
  18. font-size: 1.25em;
  19. font-family: &quot;Raleway&quot;, sans-serif;
  20. font-weight: 600;
  21. margin: 0;
  22. }
  23. .chat-app .subtitle {
  24. font-size: 1em;
  25. font-family: &quot;Raleway&quot;, sans-serif;
  26. font-weight: 500;
  27. margin: 0;
  28. }
  29. .chat-app:not(.is-active) .chat-app_toggle:hover {
  30. -webkit-animation: 0.5s blob linear;
  31. animation: 0.5s blob linear;
  32. }
  33. .chat-app_toggle {
  34. z-index: 5;
  35. position: absolute;
  36. bottom: 0.75em;
  37. right: 0.75em;
  38. height: 64px;
  39. width: 64px;
  40. transform: scale(0.83);
  41. background: linear-gradient(to right, #00c6ff, #0072ff);
  42. border-radius: 100%;
  43. transition: all 0.3s;
  44. box-shadow: 0 10px 20px rgba(0, 198, 255, 0.4);
  45. }
  46. .chat-app_toggle:hover {
  47. cursor: pointer;
  48. transform: none;
  49. }
  50. .chat-app_toggle .icon {
  51. z-index: 2;
  52. color: white;
  53. font-size: 1.5em;
  54. position: absolute;
  55. top: 0;
  56. left: 0;
  57. height: 100%;
  58. width: 100%;
  59. display: flex;
  60. align-items: center;
  61. justify-content: center;
  62. transition: all cubic-bezier(0.72, 0.17, 0.36, 1.03) 0.4s;
  63. }
  64. .chat-app_toggle:before {
  65. content: &quot;&quot;;
  66. display: block;
  67. width: 100%;
  68. height: 100%;
  69. position: absolute;
  70. top: 0;
  71. left: 0;
  72. z-index: -1;
  73. border-radius: 100%;
  74. border: 2px solid #00c6ff;
  75. opacity: 0;
  76. }
  77. .chat-app_toggle:after {
  78. content: &quot;&quot;;
  79. display: block;
  80. width: 100%;
  81. height: 100%;
  82. position: absolute;
  83. top: 0;
  84. left: 0;
  85. background: linear-gradient(to right, #00cdac, #00ae92);
  86. border-radius: 100%;
  87. transition: all 0.3s;
  88. opacity: 0;
  89. }
  90. .chat-app_box {
  91. border-radius: 16px 16px 40px 16px;
  92. overflow: hidden;
  93. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  94. position: relative;
  95. height: 600px;
  96. display: flex;
  97. flex-direction: column;
  98. background: white;
  99. }
  100. .chat-app_header {
  101. background: linear-gradient(to right, #00c6ff, #0072ff);
  102. color: white;
  103. position: relative;
  104. }
  105. .chat-app_header .branding {
  106. display: flex;
  107. flex-wrap: wrap;
  108. align-items: center;
  109. padding: 1.5em 1.5em;
  110. }
  111. .chat-app_header .close {
  112. height: 1.5em;
  113. width: 1.5em;
  114. background: #141e30;
  115. position: absolute;
  116. top: 1em;
  117. right: 1em;
  118. border-radius: 100%;
  119. z-index: 2;
  120. transition: all 0.3s;
  121. opacity: 0.5;
  122. }
  123. .chat-app_header .close:after, .chat-app_header .close:before {
  124. content: &quot;&quot;;
  125. height: 2px;
  126. width: 1em;
  127. position: absolute;
  128. left: 0.25em;
  129. top: calc(50% - 1px);
  130. background: white;
  131. transform: rotate(45deg);
  132. }
  133. .chat-app_header .close:before {
  134. transform: rotate(-45deg);
  135. }
  136. .chat-app_header .close:hover {
  137. cursor: pointer;
  138. transform: scale(1.2);
  139. opacity: 1;
  140. }
  141. .chat-app_header .avatar {
  142. margin-right: 1em;
  143. position: relative;
  144. width: 48px;
  145. height: 48px;
  146. }
  147. .chat-app_header .avatar img {
  148. width: 48px;
  149. height: 48px;
  150. -o-object-fit: cover;
  151. object-fit: cover;
  152. border-radius: 100%;
  153. box-shadow: 0 5px 10px rgba(20, 30, 48, 0.2);
  154. }
  155. .chat-app_header .avatar.is-online:after {
  156. content: &quot;&quot;;
  157. display: block;
  158. height: 0.75em;
  159. width: 0.75em;
  160. position: absolute;
  161. bottom: 0.2em;
  162. right: 0.2em;
  163. background: #00cdac;
  164. z-index: 2;
  165. border-radius: 100%;
  166. box-shadow: 0 0 0 2px white;
  167. }
  168. .chat-app_header .content {
  169. width: calc(100% - 48px - 1em);
  170. }
  171. .chat-app_content {
  172. height: 100%;
  173. width: calc(100% - 1em);
  174. position: relative;
  175. bottom: 0;
  176. left: 0;
  177. right: 0;
  178. overflow: auto;
  179. margin: 0 0.5em;
  180. }
  181. .chat-app_content::-webkit-scrollbar {
  182. width: 0.5em;
  183. background-color: transparent;
  184. }
  185. .chat-app_content::-webkit-scrollbar-thumb {
  186. border-radius: 10px;
  187. background-color: #ededed;
  188. }
  189. .chat-app_content .messages {
  190. display: flex;
  191. flex-wrap: wrap;
  192. align-items: flex-end;
  193. overflow: auto;
  194. padding: 0 1em;
  195. position: absolute;
  196. padding-bottom: 1em;
  197. width: 100%;
  198. }
  199. .chat-app_content .message {
  200. width: calc(100% - 2em);
  201. padding: 0 0.75em 0 0.75em; /* Haut droite bas gauche */
  202. background: white;
  203. margin-top: 0.25em;
  204. border-radius: 16px;
  205. margin-left: 2em;
  206. background: linear-gradient(to right, #00c6ff, #0072ff);
  207. color: white;
  208. position: relative;
  209. opacity: 1;
  210. transform: scale(0.8);
  211. transform-origin: 100% 100%;
  212. word-break: break-word;;
  213. }
  214. .chat-app_content .message:after {
  215. content: &quot;&quot;;
  216. display: block;
  217. height: 1em;
  218. width: 1em;
  219. position: absolute;
  220. bottom: 0.75em;
  221. right: -1em;
  222. -webkit-clip-path: polygon(0 0, 0% 100%, 75% 100%);
  223. clip-path: polygon(0 0, 0% 100%, 75% 100%);
  224. background: #0072ff;
  225. transform: skewY(15deg);
  226. }
  227. .chat-app_content .message.reply {
  228. margin-left: 0;
  229. margin-right: 2em;
  230. background: #ededed;
  231. color: #141E30;
  232. transform-origin: 0 100%;
  233. }
  234. .chat-app_content .message.reply:after {
  235. right: unset;
  236. left: -1em;
  237. -webkit-clip-path: polygon(100% 0, 25% 100%, 100% 100%);
  238. clip-path: polygon(100% 0, 25% 100%, 100% 100%);
  239. background: #ededed;
  240. transform: skewY(-15deg);
  241. }
  242. .chat-app_footer {
  243. background: white;
  244. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  245. padding: 1.5em;
  246. padding-top: 0.75em;
  247. position: relative;
  248. }
  249. .chat-app_footer .tools {
  250. display: flex;
  251. margin-bottom: 0.75em;
  252. }
  253. .chat-app_footer .tools .copyright {
  254. margin-left: auto;
  255. display: block;
  256. color: #a0a0a0;
  257. font-size: 0.75em;
  258. letter-spacing: 0.1em;
  259. text-transform: uppercase;
  260. padding: 0.5em 1.5em;
  261. text-align: right;
  262. display: flex;
  263. align-items: center;
  264. justify-content: right;
  265. }
  266. .chat-app_footer .tools .button-icon {
  267. margin-right: 0.25em;
  268. background: white;
  269. width: 2em;
  270. height: 2em;
  271. display: flex;
  272. align-items: center;
  273. justify-content: center;
  274. border-radius: 100%;
  275. transition: all 0.3s;
  276. color: #a0a0a0;
  277. position: relative;
  278. }
  279. .chat-app_footer .tools .button-icon i {
  280. position: relative;
  281. z-index: 2;
  282. }
  283. .chat-app_footer .tools .button-icon:after {
  284. display: block;
  285. content: &quot;&quot;;
  286. position: absolute;
  287. left: 0;
  288. top: 0;
  289. width: 100%;
  290. height: 100%;
  291. background: linear-gradient(to right, #00c6ff, #0072ff);
  292. z-index: 1;
  293. opacity: 0;
  294. transition: all 0.3s;
  295. border-radius: 100%;
  296. }
  297. .chat-app_footer .tools .button-icon:hover, .chat-app_footer .tools .button-icon:focus {
  298. cursor: pointer;
  299. box-shadow: 0 5px 10px rgba(0, 198, 255, 0.4);
  300. color: white;
  301. transform: scale(1.1);
  302. }
  303. .chat-app_footer .tools .button-icon:hover:after, .chat-app_footer .tools .button-icon:focus:after {
  304. opacity: 1;
  305. }
  306. .chat-input {
  307. height: 2.5em;
  308. width: 100%;
  309. border: none;
  310. background: #ededed;
  311. border: solid 1px #a0a0a0;
  312. border-radius: 1000px;
  313. padding: 1em 1em;
  314. font-size: 1em;
  315. transition: all 0.3s;
  316. }
  317. .chat-input:focus {
  318. outline: none;
  319. box-shadow: 0 10px 20px rgba(0, 205, 172, 0.4);
  320. border-color: #00cdac;
  321. background: white;
  322. }
  323. .chat-app .chat-app_box {
  324. transition: all cubic-bezier(0.71, 0, 0.23, 1.38) 0.5s;
  325. opacity: 0;
  326. visibility: hidden;
  327. pointer-events: none;
  328. transform-origin: 100% 100%;
  329. transform: rotate(-3deg) scale(0.8);
  330. }
  331. .chat-app .chat-app_header .avatar {
  332. transition: all 0.4s;
  333. opacity: 0;
  334. transform: scale(0.6);
  335. transition-delay: 0.2s;
  336. }
  337. .chat-app .chat-app_header .content {
  338. transition: all 0.4s;
  339. opacity: 0;
  340. transform: scale(0.9);
  341. transition-delay: 0.3s;
  342. }
  343. .chat-app .icon.send {
  344. opacity: 0;
  345. transform: translateY(-100%) scale(0.5);
  346. }
  347. .chat-app .icon.open {
  348. opacity: 1;
  349. transform: translateY(0);
  350. }
  351. .chat-app .chat-input {
  352. transition: all 0.4s;
  353. opacity: 0;
  354. }
  355. .chat-app.is-active .chat-app_box {
  356. opacity: 1;
  357. visibility: visible;
  358. pointer-events: unset;
  359. transform: none;
  360. }
  361. .chat-app.is-active .chat-app_header .avatar,
  362. .chat-app.is-active .chat-app_header .content {
  363. opacity: 1;
  364. transform: none;
  365. }
  366. .chat-app.is-active .icon.send {
  367. opacity: 1;
  368. transform: translateY(0);
  369. }
  370. .chat-app.is-active .icon.open {
  371. opacity: 0;
  372. transform: translateY(100%) scale(0.5);
  373. }
  374. .chat-app.is-active .chat-app_toggle:before {
  375. -webkit-animation: chat-bubble cubic-bezier(0.15, 0.4, 0.15, 1) 0.7s;
  376. animation: chat-bubble cubic-bezier(0.15, 0.4, 0.15, 1) 0.7s;
  377. }
  378. .chat-app.is-active .chat-app_toggle:after {
  379. opacity: 1;
  380. }
  381. .chat-app.is-active .chat-input {
  382. opacity: 1;
  383. }
  384. @media screen and (max-width: 700px) {
  385. .chat-app .chat-app_box {
  386. position: fixed;
  387. top: 0;
  388. left: 0;
  389. width: 100%;
  390. height: 100%;
  391. border-radius: 0;
  392. }
  393. .chat-app .chat-app_toggle {
  394. position: fixed;
  395. bottom: 0.75em;
  396. right: 0.75em;
  397. }
  398. }
  399. @-webkit-keyframes chat-bubble {
  400. 0% {
  401. opacity: 0;
  402. transform: scale(0.7);
  403. }
  404. 25% {
  405. opacity: 1;
  406. }
  407. 100% {
  408. opacity: 0;
  409. transform: scale(1.6);
  410. }
  411. }
  412. @keyframes chat-bubble {
  413. 0% {
  414. opacity: 0;
  415. transform: scale(0.7);
  416. }
  417. 25% {
  418. opacity: 1;
  419. }
  420. 100% {
  421. opacity: 0;
  422. transform: scale(1.6);
  423. }
  424. }
  425. @-webkit-keyframes blob {
  426. 0% {
  427. border-radius: 100% 100% 100% 100%;
  428. }
  429. 25% {
  430. border-radius: 60% 95% 60% 95%;
  431. }
  432. 50% {
  433. border-radius: 90% 65% 90% 65%;
  434. }
  435. 75% {
  436. border-radius: 80% 98% 80% 98%;
  437. }
  438. 100% {
  439. border-radius: 100% 100% 100% 100%;
  440. }
  441. }
  442. @keyframes blob {
  443. 0% {
  444. border-radius: 100% 100% 100% 100%;
  445. }
  446. 25% {
  447. border-radius: 60% 95% 60% 95%;
  448. }
  449. 50% {
  450. border-radius: 90% 65% 90% 65%;
  451. }
  452. 75% {
  453. border-radius: 80% 98% 80% 98%;
  454. }
  455. 100% {
  456. border-radius: 100% 100% 100% 100%;
  457. }
  458. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://fonts.googleapis.com/css?family=Raleway:500:600|Roboto&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  2. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css&quot;&gt;
  3. &lt;div id=&quot;chat-app&quot; class=&quot;chat-app&quot;&gt;
  4. &lt;div class=&quot;chat-app_toggle toggle&quot;&gt;
  5. &lt;div class=&quot;icon send&quot;&gt;
  6. &lt;i class=&quot;fas fa-paper-plane&quot;&gt;&lt;/i&gt;
  7. &lt;/div&gt;
  8. &lt;div class=&quot;icon open&quot;&gt;
  9. &lt;i class=&quot;fas fa-comment&quot;&gt;&lt;/i&gt;
  10. &lt;/div&gt;
  11. &lt;/div&gt;
  12. &lt;div class=&quot;chat-app_box&quot;&gt;
  13. &lt;div class=&quot;chat-app_header&quot;&gt;
  14. &lt;div class=&quot;close&quot;&gt;&lt;/div&gt;
  15. &lt;div class=&quot;content&quot;&gt;
  16. &lt;p class=&quot;title&quot;&gt;ChatBot&lt;/p&gt;
  17. &lt;p class=&quot;subtitle&quot;&gt;Ask me anything, I am here to help you.&lt;/p&gt;
  18. &lt;/div&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;/div&gt;
  22. &lt;/div&gt;
  23. &lt;/div&gt;
  24. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

  1. 尝试将以下内容添加到您的CSS代码中：
  3. div#chat-app { height: 0; }
  4. div#chat-app.is-active { height: 600px; }
英文:

try adding this to your css code

  1. div#chat-app { height: 0; }
  2. div#chat-app.is-active { height: 600px; }

huangapple
  • 本文由 发表于 2023年2月27日 10:24:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/75576302.html
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定