How to disable external css file for a bootstrap modal?

Question

I use a bootstrap modal to display content with CSS applied using an external CSS file. I integrated this modal in a web page with elements having class names similar to my modal. How can I make web page css styles not apply to my modal? I have used $('link[href="responsive.css"]').prop('disabled',true); The above code is disabling the CSS file in both the dialog and in the web page. I need to remove it only from my modal.

Answer 1

Use the document.styleSheets API to find the stylesheet in question and set the disabled attribute to true only when the modal is open:

function reenable_stylesheets()
  {
  "use strict";
  Array.from(document.styleSheets).map(
    function(value) 
    {
    value.disabled = false;
    });
  }
   
function disable_and_replace_stylesheet(val)
  {
  "use strict";
  Array.from(document.styleSheets).map(
    function(value) 
    {
    return value.href;
    }).reduce
       (
       function(prevalue, curvalue, index, data) 
         {
         disable_and_replace_stylesheet.index = !!RegExp(val).test(curvalue) ? index : undefined; 
         }
       );

  if (disable_and_replace_stylesheet.index)
    {
    console.log(disable_and_replace_stylesheet.index); document.styleSheets[disable_and_replace_stylesheet.index].disabled = true;
    }
  }

/*
document.getElementById("modal_parent").addEventListener("click", function(){disable_and_replace_stylesheet("boot");});

document.getElementById("modal_parent").addEventListener("blur", function(){reenable_stylesheets();});
*/

References

• W3C DOM Tests: Style Tests
• W3C DOM Compatibility - CSS