CSS-стиль не применяется к всплывающему окну jquery

Я не могу заставить стили CSS применять к всплывающему окну в моем приложении Rails. Всплывающее окно содержит стандартную форму Rails, кнопку воспроизведения и таймер обратного отсчета с использованием timer.jquery.js.CSS-стиль не применяется к всплывающему окну jquery

Чтобы проверить таймер.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; 
}

источник

2015-09-03 bitfizzy

где вы пишете этот css ?? в файле css или в самом html ?? Я думаю, что ваш код css не включен. просто проверьте его с помощью firebug или другого инструмента для проверки. –

В custom.css.scss, где находится остальная часть стиля для моего приложения. Остальная часть стилей приложения отлично работает. – bitfizzy

Я думаю, что этот css не загружается в всплывающее окно. проверьте его, проверив инструменты. загружен или нет? Попробуйте написать свой css на странице HTML. –

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

попробуйте добавить стиль с помощью JS в конце страницы.

источник

2015-09-03 11:53:13 electrowiz

Это действительно работает, но я бы предпочел включить стиль в обычный файл ol .css, поскольку он кажется намного более чистым. Вы знаете причину, по которой это работает? – bitfizzy

CSS-стиль не применяется к всплывающему окну jquery

ответ

Смежные вопросы