We want to have a modal popup form on clicking a image or link. Though i achieved this on CMS page using template page(.phtml), I want to use this form on every page, so i am using a static block inside header.phtml.

Now the problem is style tags of the static block is overriding the default CSS, hence the page is getting distort. Please help me with a way, so that the static block CSS doesn't effect other part of the pages.

  • will popup work instead of model?
    – Lalit838
    Commented Oct 9, 2017 at 5:27

1 Answer 1


The best way to avoid css conflict is to add css using Unique Parent class. In your case , if you dont't have any such class. Then , you just have to move your complete modal inside a new div with unique class name. ex:-

<div class='custom-modal'>
 <div class='modal'>
   //Code for your modal goes here

Now add this custom-modal class before the css of modal. ex:-

.custom-modal .modal
//style goes here

If you are using LESS , then it becomes very easy. You don't have to add .custom-modal before each style for your modal. just use.

  // complete css for your modal
  • Thanks Vicky, i tried adding parent class but that doesn't helped me. Please suggest me what to do next ?
    – Mek
    Commented Oct 5, 2017 at 14:17
  • Any other idea for this.....?
    – Mek
    Commented Oct 10, 2017 at 6:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.