I am faced with a situation where I have 2 files, namely index.htm and inner.htm.
My goal is to load a specific div from inner.htm into index.htm using Fancybox 2. After exploring various options, I decided to employ AJAX for this task. However, the issue arises when the AJAX request inherits the parent CSS, whereas I want inner.htm to utilize its own CSS styling.
Initially, I tried using an iFrame which allowed me to maintain inner.htm's original CSS, but it did not provide the functionality to load a specific DIV element.
Below are the key points of my dilemma:
Using AJAX: - Specific div from inner.htm can be loaded - However, it adopts the parent CSS instead of its own
Using iFrame: - Unable to load a specific div, only the entire inner.htm page - Maintains its own CSS, thus not inheriting from the parent as desired
Any assistance or guidance on resolving this would be highly appreciated. Thank you!
To clarify further, in my implementation with Bootstrap, when I refer to "inner.htm should use its own CSS," I mean that it should apply its own bootstrap.css to fit within the modal box properly. Presently, it is inheriting the parent's bootstrap.css causing display issues (like horizontal scrollbar appearing).
Therefore, my objective is for inner.htm within the modal box to utilize its own col-md-4 class rather than the parent's. I hope this explanation clarifies the situation. Thank you very much! :)