CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
shah rushabh
shah rushabh

Reputation: 41

Bootstrap modal is not showing. How to resolve?

I want to show modal when it clicking "reportpet" but it not displaying modal. How can I resolve this error please help me.

URL:

http://newseinstein.com/Rwork/index.php/Pet/view/104

HTML:

   <span class="text">
       <a href="#" class="button" data-toggle="modal" data-target="locationreport" id="reportpet">Report</a>
   </span>

Modal Code:

<div class="modal fade" id="locationreport" role="dialog" style="display: none;"> 
<div class="modal-dialog">

  <!-- Modal content-->
  <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>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>

JS code:

  $("#reportpet").click(function(){
    $("#locationreport").show();
  })

Upvotes: 0

Views: 183

Answers (1)

Chiller
Chiller

Reputation: 9738

Change your data-target to data-target="#locationreport" you need to add # before the id of the modal

<span class="text">
       <a href="#" class="button" data-toggle="modal" data-target="#locationreport" id="reportpet">Report</a>
</span>

See bootply

Upvotes: 3

Related Questions