CSS 样式不适用于 jquery 弹出窗口 window

Question

我无法将我的 CSS 样式应用于我的 Rails 应用程序中的弹出窗口 window。弹出窗口 window 包含一个沼泽标准 Rails 表单、一个播放按钮和一个使用 timer.jquery.js 的倒数计时器。

为了测试 timer.jquery.js，我写了一个类似的 html 文件。那里的造型效果很好。对于弹出窗口 windows，我可能缺少一些明显的规则，但我以前从未与他们合作过，到目前为止我没有遇到过任何事情。这是运行良好的测试文件：

timer.html

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="timer.jquery.js"></script>
        <style>
            #timer {
                color: black;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div id="timer"></div>
        <script>
            $('#timer').timer({
                format: '%H:%M:%S'
            });
            $('#timer').timer('pause');
        </script>
    </body>
</html>

下面是我在 Rails 应用程序中使用的相关文件：

_track_time_form.html.erb

<div id="countdown-timer"></div>
<div id="playback-controls">&#9658;</div>
<div id="track-time-form">
    <%= form_for @project, :url => { :action => "log_time" }, remote: true do |p| %>
        <ul>
            <li><%= p.label :project, "Project:"%><br>
            <%= p.collection_select(:id, current_user.projects, :id, :name) %></li>
            <%= p.hidden_field :time_logged, :value => 0 %> <!-- value set by script in log_time.js.erb -->
            <li><%= p.submit "Log time", id: "log-time-button" %></li>
        </ul>
    <% end %>
</div>

track.js.erb

timeTrackingForm = window.open("", "", "height=700,width=500");
$(timeTrackingForm.document.body).html("<%= j render( :partial => 'track_time_form' ) %>");

$(timeTrackingForm.document).ready(function(){
    var timer = $("#countdown-timer", $(timeTrackingForm.document))
    $(timer).timer({
        format: '%H:%M:%S'
    });
    $(timer).timer('pause');
});

造型

#countdown-timer {
    font-size: 40px;
    color: black;
}

#playback-controls {
    font-size: 40px;
    color: black;
}

Answer 1

$('#timer').css({'color':'black','font-size':'50x'});

尝试在页面末尾通过js添加样式。

CSS 样式不适用于 jquery 弹出窗口 window

CSS styling not applying to jquery popup window

html

css

jquery

ruby-on-rails

popupwindow