0

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 Oct 9 '17 at 5:27
0

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
 </div>
</div> 

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.

.custom-modal
{
  // 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 Oct 5 '17 at 14:17
  • Any other idea for this.....? – Mek Oct 10 '17 at 6:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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