how to Hide Close Page icon in Popup page

0
  how to Hide Close Page icon in Popup page    
asked
3 answers
2

If you want to hide the close button for specific popup pages, you’ll need to do two things:

  1. Add a class to the popup page
  2. Target that class with some custom (S)CSS

 

Open the popup page in Studio Pro and add a class to the page, for example remove-popup-close

If you inspect the buildup of elements from your browser, you’ll notice that it will look somewhat like this:

As you can see, you can now apply specific styling for this specific popup. Something along the lines of this should help you get on your way:

.modal-dialog.remove-popup-close > .modal-content > .modal-header > .close {
  display: none;
}

 

answered
2

Like stated in the previous answer, you can hide it by using CSS. There are some good tutorials to be found how to do this in the documentation.

The class you are looking for is located at yourproject\theme\styles\web\sass\core\widgets\_modals.scss

Copy this class and add it to your custom CSS file (located at yourproject\theme\styles\web\sass\app\_custom.scss) like this: 

.close {
             display:none;
         }

Compile your sass to css using calypso and you will no longer see the close button

answered
0

Hello Arun, we can hide the button using css. Find the css class for the button and make it as display: none

answered