Question

尝试使用模态显示警报或通知。希望模式仅在有消息显示时弹出。目前模态根本不显示。尝试将bootstrap触发器放在文档加载但没有效果。 Live site。 Git repo。

site.js：

$(document).on('ready page:load', function(){
$('.rating').raty( { path: '/assets', scoreName: 'comment[rating]' });
$('.rated').raty({ path: '/assets', 
  readOnly: true,
  score: function() {
    return $(this).attr('data-score');
  }
});
$('#myModal').modal('show');});

应用程序布局：

<div class="wrapper">
    <!---START NOTICE/ALERT MODAL --->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Alert</h4>
                </div>
      <div class="modal-body">
        <p><%= notice %>
    <%= alert %></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<%= yield %>
</div>
</body>
</html>

您的意见表示赞赏！

Answer 1

我相信你已经接近了！

我没有任何文本编辑器，但你应该尝试这样的事情：

<% if flash[:alert] %>    
     <div class="wrapper">
        <!---START NOTICE/ALERT MODAL --->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Alert</h4>
                    </div>
                    <div class="modal-body">
                         <p><%= flash[:alert] %></p>
                    </div>
                    <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                 </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<% end %>

并在JS文件中： $("#myModal").modal('show');

另一件事，你可能有TurboLink gem的问题。您是否可以尝试在$(document).on('ready page:load')内放置console.log并刷新页面，以确保事件被正确触发？如果它不起作用，你可以尝试在你的application.js中包含它吗？

//= require jquery //= require jquery.turbolinks //= require jquery_ujs // // ... your other scripts here ... // //= require turbolinks

并在你的Gemfile中： gem 'jquery-turbolinks'

PS：我不确定在UX方面，在每个警报上显示模态是个好主意。只有我的。

在RoR警报或通知上显示模态

1 个答案: