Remove Header for Modal pop-up layout

Hi Team,  I am trying to hide the header with the close button in the modal pop-up I would like to hide only for that particular page in which i am using How should I achieve it Thanks
3 answers

What Sufian mentioned is the way to go. To generalize the way to approach these UI questions, but with some additives:


  • Inspect the element you want to hide
    • ctrl+shft+c is a quick way to select
  • Search what div is the above frame (in your question the modal popup)
    • this is the place where you will put your class on
      • i often use a style for my classes in the shape of {2 letters of application}-{element}
      • for example if your application is called “my application” → my-modal
  • Create a class to be put on that frame
    • my-modal on the highest level of the pop-up page
  • call the class that is used for the element you want to hide and add the function
    • I often like to use the modal-header within the class:
    • .my-modal {
      • .modal-header{
        • display: none;
          • }
        • }

This will help you with other ui questions :)

if you have other questions, feel free to shoot them!


Hi Joseph,

Add a class example myModal to your modal from properties appearance tab . Then in your custom css add the following 

.myModal .modal-header{

display: none;



.modal-header is your target.




The other answers are fine, but when you hide the .modal-header completely, you’re no longer able to drag the window around. May be you don’t need that, but if you do, try this scss (it leaves the header with some padding, but removes the content):

    & .no-header .modal-content .modal-header {
        border: none;
        padding: 4px;
        * {
            display: none;