CODEWITHSUNDEEP
csstwitter-bootstrap
user310291
user310291

Reputation: 38190

Popup on bootstrap glyph icon click

I followed the tutorial https://www.w3schools.com/bootstrap/bootstrap_modal.asp

but want to do it with glyph icon so :

<span class="glyphicon glyphicon-pencil" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">

Doesn't work ? Is it possible ?

Upvotes: 1

Views: 10727

Answers (4)

CaShiS
CaShiS

Reputation: 235

You could make it like my code under and then 'click' on glyph should open modal. There is problem with your code becouse you cant add 'class' two times to one element. 

<span class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#myModal"></span>

Upvotes: 3

LP154
LP154

Reputation: 1497

You can put the glyphicon on a button :

<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-pencil"></span>
</button>

Upvotes: 2

Khyana
Khyana

Reputation: 195

try this: 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
  <div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <span class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#myModal"></span>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <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>
  </div>
  
</div>

Upvotes: 1

Cragsterboy
Cragsterboy

Reputation: 31

    <a href="#myModal" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-pencil"></span></a>

Put a call to action (ie. href, button) round your span tags and it will work.

Upvotes: 3

Related Questions