Rails Bootstrap Modal not appearing -
i have included bootstrap modal inside page. page gets grey out when press on button , no pop dialog appears. however, when press esc button, dialog flashes once before exiting. instance tried was, included //= bootstrap/modal
inside application.js file. inside file had line //= bootstrap
. when have both of line included, modal stays less 1 second when press button.
below code of 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) |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 modal 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 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 no issue regarding code. sake of clarity, explaining step regarding modal implementation.
steps 1. include bootstrap.js in javascript, , kindly check there 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 modal, 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>
Comments
Post a Comment