Remove style sheet in thickbox using jquery

Question

I have a partial view (Partial.ascx), two master pages(Master1.Master and Master2.Master) and two Views(Page1.aspx and Page2.aspx) in my asp.net mvc (C#) application. I have referred different style sheet for each master page.

When i show the partial view (Partial.ascx) as thickbox in View(Page1.aspx) whose Master page is Master1.Master, i need to overwrite the styles of elements inside the thickbox with style sheet referring to Master2.Master, without affecting the styles of the Page1.aspx elements.

I have tried like:

$("link[href*='style1.css']").remove();

But the problem with this query is it reflects in Page1.aspx View, which when i close the thickbox or in the shadow view of the page, the styles of that page are vanished.

How can overwrite the style sheet of elements inside a thickbox using jquery without affecting the main View elements?

Answer 1

Have you tried only removing styles that are within the thickbox it's self? Something like this where #thickbox is the ID of the thickbox.

$("link[href*='style1.css']", '#thickbox').remove();

Answer 2

A style is set and used in the page when the page loaded by browser. After page rendered, removing link element will not affect anything anymore, since all css rules have been used in the displayed page.

What you can do is restructure the stylesheet. Separate it into different css file, then load in view according to tour needs. In PHP, I can put simple if to detect if the page loaded by AJAX or normal request, so I can load different CSS according to my needs. I believe there should be simple way to do the same in asp.net.