Question

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

为了测试timer.jquery.js，我写了一个类似的html文件。那里的造型很好用。弹出式窗口可能会出现一些明显的规则，但我之前从未使用过这些规则，到目前为止我还没有遇到任何问题。这里的测试文件运行正常：

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弹出窗口

1 个答案: