如何禁用引导模式的外部 css 文件？答案

【问题标题】：How to disable external css file for a bootstrap modal?如何禁用引导模式的外部 css 文件？
【发布时间】：2015-10-05 10:59:41
【问题描述】：

我使用引导模式来显示使用外部 CSS 文件应用 CSS 的内容。我将此模态集成到一个网页中，其中的元素具有与我的模态相似的类名。如何使网页 css 样式不适用于我的模态？我用过$('link[href="responsive.css"]').prop('disabled',true); 上面的代码在对话框和网页中都禁用了 CSS 文件。我只需要从我的模式中删除它。

【问题讨论】：

在这里提供一些代码。
我只在模态页面中使用了上述代码。有两个文件，一个是网页，另一个是模态代码页。我已经使用 iframe 在网页中集成了模态页面

标签： javascript jquery css bootstrap-modal disable-link

【解决方案1】：

仅在模式打开时使用document.styleSheets API 查找有问题的样式表并将disabled 属性设置为true：

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();});
*/

参考文献

【讨论】：