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">&times;</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">&times;</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

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -