Question

所以我有这个项目，我想为网站建立一个管理面板。我使用弹出一个弹出框，当你点击特殊设置时会弹出。

我想将带有JavaScript代码的HTML内容填充到此弹出框中，以便我只能使用一个用于所有设置

问题是，我在弹出框中插入的html代码在显示之前不会应用我想要的类的样式。

如何打开代码：

function open_popup_box(heading, content){
  $("#popup_box_heading").html(heading);
  $("#popup_box_content").html(content);
  $("#popup_box").fadeIn();
  $("#popup_box_bg").addClass("show");
}

我要插入元素的类是在style.css中定义的。唯一有效的是内联样式，但这不是一个选项，因为我想使用悬停和其他CSS的东西

有人知道如何解决这个问题吗？

按要求提供CSS：

.custom_select{
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  padding: .5em;
  padding-right: 1.5em;
  width: 40%;
  font-size: 16px;
}

HTML：

<!-- Just to let you know in wich order i loaded the files -->
  <link rel="stylesheet" type="text/css" href="external/css/style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="external/js/globalfunctions.js"></script>



<div id="popup_box">
    <table id="popup_box_table">
      <tr id="popup_box_header">
        <td>
          <table>
            <tr>
              <td>
              </td>
              <td width="50px">
                <i id="popup_box_close_icon" class="fa fa-times"></i>
              </td>
              <td id="popup_box_heading">
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr >
        <td id="popup_box_content">

        </td>
      </tr>
    </table>
  </div>

这是打开弹出框的JS的一部分（现在设置了内联样式，因为它是我唯一能够工作的东西）：

var content='<div id="popup_box_content_div"><select class="custom_select" id="lang_select" style="border-radius: 0; -webkit-appearance: none; -moz-appearance: none; background-position: right 50%; background-repeat: no-repeat; padding: .5em; padding-right: 1.5em; width: 40%; font-size: 16px;">';
$.each(language_list, function(i, lang){
   content+='<option>';
   content+=lang.showName;
   content+='</option>';
});
content+='</select></div>';
open_popup_box("Choose your preferred Language", content);

Answer 1

摆脱内容中的内联风格＆＃39; JS中的变量。 CSS可能不起作用的唯一原因是CSS选择器实际上是某个其他选择器的子节点，并且您追加的内容不是该选择器的子节点。如果您使用的是SCSS，那么CSS选择器是否嵌套在其他选择器中？如果您使用的是vanilla CSS，那么它是整个选择器还是前面有一些其他元素（例如.foo .custom_select {}）？

Answer 2

听起来代码中可能存在CSS继承问题。您可以使用BEM样式，直接将HTML元素设置为仅具有一个级别的特定类，从而规避样式的级联。

或者，不是将模态HTML放在JS中，而是将其直接添加到页面的HTML中，只显示/隐藏模态。如果它仍然无效，那么您就知道为什么会在浏览器开发者工具中看到冲突。

在使用JQuery / JS插入新元素后，HTML确实无法识别我的CSS

2 个答案: