Modal Popup Form On Image Click

Question

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.

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