0

I have a block that calls a bootstrap modal to show an article when left-clicked, I need to add a link to it so a page can be opened when right clicked and "Open in new window" chosen.
I'm new to bootstrap and I don't know how to even start searching for it.

The code is as follows:

<div data-ajaxurl="showitemajax.php?id=67" data-target="#exampleModal" data-toggle="modal" class="articlebl col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <img class="img-fluid w-100" alt="Test Article" src="image.jpg">
            <div class="articlebltitle">Test Article</div>
</div>

I want to add a link around the img and the inner div to enable middle-clicking (opening in a new window)

I tried this:

<div data-ajaxurl="showitemajax.php?id=67" data-target="#exampleModal" data-toggle="modal" class="articlebl col-lg-2 col-md-3 col-sm-4 col-xs-6">
    <a href="showitem.php?id=67">
            <img class="img-fluid w-100" alt="Test Article" src="image.jpg">
            <div class="articlebltitle">Test Article</div>
    </a>
</div>

but it takes me to the page instead. adding class='ignore-click' and using $(".ignore-click").click(function(){return false;}) as mentioned here stops the modal dialog from showing.

workoverflow
  • 578
  • 5
  • 16

1 Answers1

0

Solved by changing the outer div to a

<a href="showitem.php?id=67" data-ajaxurl="showitemajax.php?id=67" data-target="#exampleModal" data-toggle="modal" class="articlebl col-lg-2 col-md-3 col-sm-4 col-xs-6">
        <img class="img-fluid w-100" alt="Test Article" src="image.jpg">
        <div class="articlebltitle">Test Article</div>
</a>
workoverflow
  • 578
  • 5
  • 16