Anchor around button automatically redirecting

Question

I am trying to make a lightbox appear when a button is pushed. Problem is, when the anchor is around the button (like in the code below), it automatically redirects to "mywebsite.com/myimage.jpg". However when the anchor is inside, only clicking the text will pop the lightbox. Here is the code:

<a href="myimage.jpg" rel="lightbox" title="Title!" style="color:white" class="lightbox">
    <div>
        <button class="btn btn-lg btn-block" style="background:red">Button Text!</button>
    </div>
</a>

`Problem is, when the href is around the button (like in the code below)`...can you finish this sentence? Whats the problem? — jmore009, Jan 14 '15 at 03:05

score 1 · Accepted Answer · answered Jan 14 '15 at 03:30

Anchors and buttons have two different intended purposes, though Bootstrap allows you to style either as a button. Pick one. Using both is just bad practice.

<a href="myimage.jpg" rel="lightbox" title="Title!" 
    class="lightbox btn btn-danger btn-lg btn-block my-button-class">Button Text!</a>

The .btn-danger variant gets you the white-on-red scheme you seem to be going for. See http://getbootstrap.com/css/#buttons-options.

If this doesn't solve your problem you'll need to be more clear about which lightbox plugin you're using and what properties it's looking for.

Anchor around button automatically redirecting

1 Answers1