How to close button (X) on click?-CodePudding

I need the code to close the button on click X, can anyone help?

        <div data-n102-crm-hello-cont=""  style="border-color: #00adf2;">
        <span data-n102-hello-btn-hide="" ></span>
        <div >
            <div >
                <span data-n102-hello-icon=""  style="background-image: url(&quot;https://dcnt5qvi2hv76.cloudfront.net/b3067253/resize_cache/721200/f72cdc32ecc10461003d548dee4468d0/crm/button/495fc22c03e471aaa48ed60d48ba772c.png?h=auto-alliance.bitrix24.ua&quot;);"></span>
            </div>
            <div >
                <div data-n102-hello-name="" >Шкурлей Анастасія</div>
                <div data-n102-hello-text="" >Вітаю! Готова допомогти вам. Напишіть мені, якщо у вас виникнуть запитання.</div>
            </div>
        </div>
        <div  style="border-color: #00adf2;"></div>
    </div>

CSS:

.n102-widget-button-popup-name { font: bold 14px"Helvetica Neue", Arial, Helvetica, sans-serif; color: #000 } .n102-widget-button-popup-description { margin: 4px 0 0 0; font: 13px"Helvetica Neue", Arial, Helvetica, sans-serif; color: #424956 }

.n102-widget-button-popup { display: none; position: absolute; left: 100px; padding: 12px 10px 12px 14px; width: 279px; border: 2px solid #2fc7f7; background: #fff; border-radius: 15px; box-sizing: border-box; z-index: 1; cursor: pointer } .n102-widget-button-popup-triangle { position: absolute; display: block; width: 8px; height: 8px; background: #fff; border-right: 2px solid #2fc7f7; border-bottom: 2px solid #2fc7f7 } .n102-widget-button-popup-show { display: block; -webkit-animation: show .4s linear forwards; animation: show .4s linear forwards }

.n102-widget-button-position-top-left .n102-widget-button-popup-triangle { top: 19px; left: -6px; -webkit-transform: rotate(134deg); transform: rotate(134deg) } .n102-widget-button-position-bottom-left .n102-widget-button-popup-triangle { bottom: 25px; left: -6px; -webkit-transform: rotate(134deg); transform: rotate(134deg) } .n102-widget-button-position-bottom-left .n102-widget-button-popup, .n102-widget-button-position-bottom-middle .n102-widget-button-popup { bottom: 0; left: 75px }

.n102-widget-button-position-bottom-right .n102-widget-button-popup-triangle { bottom: 25px; right: -6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .n102-widget-button-position-bottom-right .n102-widget-button-popup { left: -298px; bottom: 0 } .n102-widget-button-position-top-right .n102-widget-button-popup-triangle { top: 19px; right: -6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .n102-widget-button-position-top-right .n102-widget-button-popup { top: 0; left: -320px } .n102-widget-button-position-top-middle .n102-widget-button-popup-triangle { top: 19px; left: -6px; -webkit-transform: rotate(134deg); transform: rotate(134deg) } .n102-widget-button-position-top-middle .n102-widget-button-popup, .n102-widget-button-position-top-left .n102-widget-button-popup { top: 0; left: 75px } .n102-widget-button-position-bottom-middle .n102-widget-button-popup-triangle { bottom: 25px; left: -6px; -webkit-transform: rotate(134deg); transform: rotate(134deg) } .bx-touch .n102-widget-button-popup { padding: 10px 22px 10px 15px } .bx-touch .n102-widget-button-popup { width: 230px } .bx-touch .n102-widget-button-position-bottom-left .n102-widget-button-popup { bottom: 90px; left: 0 } .bx-touch .n102-widget-button-popup-image { margin: 0 auto 10px auto } .bx-touch .n102-widget-button-popup-content { text-align: center } .bx-touch .n102-widget-button-position-bottom-left .n102-widget-button-popup-triangle { bottom: -6px; left: 25px; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .bx-touch .n102-widget-button-position-bottom-left .n102-widget-button-popup { bottom: 90px; left: 0 } .bx-touch .n102-widget-button-position-bottom-right .n102-widget-button-popup { bottom: 90px; left: -160px } .bx-touch .n102-widget-button-position-bottom-right .n102-widget-button-popup-triangle { bottom: -6px; right: 30px; -webkit-transform: rotate(-45deg); transform: rotate(45deg) }

.bx-touch .n102-widget-button-position-bottom-middle .n102-widget-button-popup { bottom: 90px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%) } .bx-touch .n102-widget-button-position-bottom-middle .n102-widget-button-popup-triangle { bottom: -6px; left: 108px; -webkit-transform: rotate(134deg); transform: rotate(45deg) } .bx-touch .n102-widget-button-position-top-middle .n102-widget-button-popup { top: 90px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0) } .bx-touch .n102-widget-button-position-top-middle .n102-widget-button-popup-triangle { top: -7px; left: auto; right: 108px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg) } .bx-touch .n102-widget-button-position-top-left .n102-widget-button-popup { top: 90px; left: 0 } .bx-touch .n102-widget-button-position-top-left .n102-widget-button-popup-triangle { left: 25px; top: -6px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg) } .bx-touch .n102-widget-button-position-top-right .n102-widget-button-popup { top: 90px; left: -150px } .bx-touch .n102-widget-button-position-top-right .n102-widget-button-popup-triangle { top: -7px; right: 40px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg) } .n102-widget-button-popup-btn-hide { position: absolute; top: 4px; right: 4px; display: inline-block; height: 20px; width: 20px; background-image: url('data:image/svg xml;charset=US-ASCII,'); background-repeat: no-repeat; background-position: center; opacity: .2; -webkit-transition: opacity .3s; transition: opacity .3s; cursor: pointer } .n102-widget-button-popup-btn-hide:hover { opacity: 1 } .bx-touch .n102-widget-button-popup-btn-hide { background-image: url('data:image/svg xml;charset=US-ASCII,'); background-repeat: no-repeat } .n102-widget-button-popup-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; /* flex-flow: row wrap */ } .n102-widget-button-popup-content { width: 200px } .n102-widget-button-popup-image { margin: 0 10px 0 0; width: 42px; text-align: center } .n102-widget-button-popup-image-item { display: inline-block; width: 42px; height: 42px; border-radius: 100%; background-repeat: no-repeat; background-position: center; background-size: cover } .n102-widget-button-popup-button { margin: 15px 0 0 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center } .n102-widget-button-popup-button-item { display: inline-block; margin: 0 16px 0 0; font: bold 12px"Helvetica Neue", Arial, Helvetica, sans-serif; color: #08a6d8; text-transform: uppercase; border-bottom: 1px solid #08a6d8; -webkit-transition: border-bottom .3s; transition: border-bottom .3s; cursor: pointer } .n102-widget-button-popup-button-item:hover { border-bottom: 1px solid transparent } .n102-widget-button-popup-button-item:last-child { margin: 0 } .n102-widget-button-pulse { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid #00aeef; border-radius: 50% }

CodePudding user response：

You need javascript if you want the interact with the DOM.

Judging from the CSS you can replace n102-widget-button-popup-show to n102-widget-button-popup-hide on your OuterMost Div.

CodePudding user response：

Do you want something like this? if not please describe a little bit more about it.

var x_btn = document.querySelector('.n102-widget-button-popup-btn-hide')
var popup = document.querySelector('.n102-widget-button-popup')

x_btn.addEventListener('click', () => popup.style.display = 'none');

.n102-widget-button-popup-name { font: bold 14px"Helvetica Neue", Arial, Helvetica, sans-serif; color: #000 } .n102-widget-button-popup-description { margin: 4px 0 0 0; font: 13px"Helvetica Neue", Arial, Helvetica, sans-serif; color: #424956 }

.n102-widget-button-popup { display: block; position: absolute; left: 100px; padding: 12px 10px 12px 14px; width: 279px; border: 2px solid #2fc7f7; background: #fff; border-radius: 15px; box-sizing: border-box; z-index: 1; cursor: pointer } .n102-widget-button-popup-triangle { position: absolute; display: block; width: 8px; height: 8px; background: #fff; border-right: 2px solid #2fc7f7; border-bottom: 2px solid #2fc7f7 } .n102-widget-button-popup-show { display: block; -webkit-animation: show .4s linear forwards; animation: show .4s linear forwards }

.n102-widget-button-position-top-left .n102-widget-button-popup-triangle { top: 19px; left: -6px; -webkit-transform: rotate(134deg); transform: rotate(134deg) } .n102-widget-button-position-bottom-left .n102-widget-button-popup-triangle { bottom: 25px; left: -6px; -webkit-transform: rotate(134deg); transform: rotate(134deg) } .n102-widget-button-position-bottom-left .n102-widget-button-popup, .n102-widget-button-position-bottom-middle .n102-widget-button-popup { bottom: 0; left: 75px }

.n102-widget-button-position-bottom-right .n102-widget-button-popup-triangle { bottom: 25px; right: -6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .n102-widget-button-position-bottom-right .n102-widget-button-popup { left: -298px; bottom: 0 } .n102-widget-button-position-top-right .n102-widget-button-popup-triangle { top: 19px; right: -6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .n102-widget-button-position-top-right .n102-widget-button-popup { top: 0; left: -320px } .n102-widget-button-position-top-middle .n102-widget-button-popup-triangle { top: 19px; left: -6px; -webkit-transform: rotate(134deg); transform: rotate(134deg) } .n102-widget-button-position-top-middle .n102-widget-button-popup, .n102-widget-button-position-top-left .n102-widget-button-popup { top: 0; left: 75px } .n102-widget-button-position-bottom-middle .n102-widget-button-popup-triangle { bottom: 25px; left: -6px; -webkit-transform: rotate(134deg); transform: rotate(134deg) } .bx-touch .n102-widget-button-popup { padding: 10px 22px 10px 15px } .bx-touch .n102-widget-button-popup { width: 230px } .bx-touch .n102-widget-button-position-bottom-left .n102-widget-button-popup { bottom: 90px; left: 0 } .bx-touch .n102-widget-button-popup-image { margin: 0 auto 10px auto } .bx-touch .n102-widget-button-popup-content { text-align: center } .bx-touch .n102-widget-button-position-bottom-left .n102-widget-button-popup-triangle { bottom: -6px; left: 25px; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .bx-touch .n102-widget-button-position-bottom-left .n102-widget-button-popup { bottom: 90px; left: 0 } .bx-touch .n102-widget-button-position-bottom-right .n102-widget-button-popup { bottom: 90px; left: -160px } .bx-touch .n102-widget-button-position-bottom-right .n102-widget-button-popup-triangle { bottom: -6px; right: 30px; -webkit-transform: rotate(-45deg); transform: rotate(45deg) }

.bx-touch .n102-widget-button-position-bottom-middle .n102-widget-button-popup { bottom: 90px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%) } .bx-touch .n102-widget-button-position-bottom-middle .n102-widget-button-popup-triangle { bottom: -6px; left: 108px; -webkit-transform: rotate(134deg); transform: rotate(45deg) } .bx-touch .n102-widget-button-position-top-middle .n102-widget-button-popup { top: 90px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0) } .bx-touch .n102-widget-button-position-top-middle .n102-widget-button-popup-triangle { top: -7px; left: auto; right: 108px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg) } .bx-touch .n102-widget-button-position-top-left .n102-widget-button-popup { top: 90px; left: 0 } .bx-touch .n102-widget-button-position-top-left .n102-widget-button-popup-triangle { left: 25px; top: -6px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg) } .bx-touch .n102-widget-button-position-top-right .n102-widget-button-popup { top: 90px; left: -150px } .bx-touch .n102-widget-button-position-top-right .n102-widget-button-popup-triangle { top: -7px; right: 40px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg) } .n102-widget-button-popup-btn-hide { position: absolute; top: 4px; right: 4px; display: inline-block; height: 20px; width: 20px; background-image: url('data:image/svg xml;charset=US-ASCII,'); background-repeat: no-repeat; background-position: center; opacity: .2; -webkit-transition: opacity .3s; transition: opacity .3s; cursor: pointer } .n102-widget-button-popup-btn-hide:hover { opacity: 1 } .bx-touch .n102-widget-button-popup-btn-hide { background-image: url('data:image/svg xml;charset=US-ASCII,'); background-repeat: no-repeat } .n102-widget-button-popup-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; /* flex-flow: row wrap */ } .n102-widget-button-popup-content { width: 200px } .n102-widget-button-popup-image { margin: 0 10px 0 0; width: 42px; text-align: center } .n102-widget-button-popup-image-item { display: inline-block; width: 42px; height: 42px; border-radius: 100%; background-repeat: no-repeat; background-position: center; background-size: cover } .n102-widget-button-popup-button { margin: 15px 0 0 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center } .n102-widget-button-popup-button-item { display: inline-block; margin: 0 16px 0 0; font: bold 12px"Helvetica Neue", Arial, Helvetica, sans-serif; color: #08a6d8; text-transform: uppercase; border-bottom: 1px solid #08a6d8; -webkit-transition: border-bottom .3s; transition: border-bottom .3s; cursor: pointer } .n102-widget-button-popup-button-item:hover { border-bottom: 1px solid transparent } .n102-widget-button-popup-button-item:last-child { margin: 0 } .n102-widget-button-pulse { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid #00aeef; border-radius: 50% }

        <div data-n102-crm-hello-cont=""  style="border-color: #00adf2;">
            <span data-n102-hello-btn-hide="" ></span>
            <div >
                <div >
                    <span data-n102-hello-icon=""  style="background-image: url(&quot;https://dcnt5qvi2hv76.cloudfront.net/b3067253/resize_cache/721200/f72cdc32ecc10461003d548dee4468d0/crm/button/495fc22c03e471aaa48ed60d48ba772c.png?h=auto-alliance.bitrix24.ua&quot;);"></span>
                </div>
                <div >
                    <div data-n102-hello-name="" >Шкурлей Анастасія</div>
                    <div data-n102-hello-text="" >Вітаю! Готова допомогти вам. Напишіть мені, якщо у вас виникнуть зfdgdfg апитання.</div>
                </div>
            </div>
            <div  style="border-color: #00adf2;"></div>
        </div>