Showing posts with label outline. Show all posts
Showing posts with label outline. Show all posts

Wednesday 12 June 2013

Removing Twitter Bootstrap modal link outlines

Developers who use Twitter Bootstrap may have noticed a problem when they use the navigation controls to launch a modal. This could be a link at the top which launches a contact form for example. The problem is, that an outline to the link is left behind. I've seen a few 'solutions' to this on the web. None of which worked for me, because they were CSS solutions and the outline is created using JavaScript. So, here's what a link required to launch a modal looks like:
<a href="#myModal" data-toggle="modal">Launch modal</a>
And here is some coding for the modal:

<div id="myModal" class="modal hide fade" role="dialog">
  <p>Hello</p>
    <button class="btn btn-primary">Save</button>
  </div>
</div>
Now, at last is the solution. Because, JavaScript creates the problem, it's a good idea to use JavaScript (in my case jQuery) to resolve it. The code should look like this:

(function()
{
    $('a').data('toggle','modal').click(function()
    {
        $(this).css(
        {
            'outline':'none'
        });
    });
})();
Good luck.