I have included Bootstrap modal inside my page. But my page just gets grey out when i press on the button and no pop dialog appears. However, when i press the ESC button, the dialog flashes once before exiting. Another instance i tried was, i included //= bootstrap/modal inside my application.js file. Inside this file i also had the line //= bootstrap. When i have both of this line included, the modal only stays for less than 1 second when i press the button.
Below is the code of my view page,
<% provide(:title, "Log in") %>
<div class="center jumbotron">
<h1> Kaching </h1>
<div class = "row" >
<div class="col-md-6 col-md-offset-3">
<%= form_for(:session, url: login_path) do |f| %>
<%= f.label :logID, "Log ID" %>
<%= f.text_field :logID %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.submit "Log In", class:"btn btn-primary" %>
<% end %>
</div>
</div>
</div>
<div class="container">
<h2>Small Modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Thanks
There seems to be no issue regarding your code. For the sake of clarity, i will be explaining all the step regarding modal implementation.
steps 1. include bootstrap.js in your JavaScript, and kindly check there is only bootstrap.js or bootstrap.min; both of them should not present.
2.Modal calling step should be
<button type="button" class="btn btn-primary success" data-toggle="modal" data-target="#myModal">Login
</button>
3.On calling the modal, the codes are
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Please Login</h4>
</div>
<div class="modal-body">
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="user name">
<input type="password" class="form-control" placeholder="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary info">Login</button>
</div>
</div>
</div>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments