DEV Community

Cover image for Creating A Bootstrap Modal Off Of Text
Amy Oulton
Amy Oulton

Posted on • Updated on

Creating A Bootstrap Modal Off Of Text

This post serves as a tutorial to showcase the working parts of Bootstrap modals. It is not best practice, nor is it inclusive for people who rely on good accessibility. Use this post as a learning resource to understand things like data-toggle, but when creating an actual modal, make sure you're using semantic code (like buttons) to make it screen-reader accessible. Scroll down past the accessible solution to find a new solution that promotes accessibility!

When creating a modal, Bootstrap docs provide you with this example:

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal</button>

 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
    ...
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
   </div>
 </div>
Enter fullscreen mode Exit fullscreen mode

But what if instead of a button, you want to launch the modal off of a link in the middle of a paragraph. The answer is simple.

Non-accessible version (not recommended).

First, create a simple <p> tag and insert some text.

 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. 
 Minima optio consectetur repudiandae rerum nesciunt esse, 
 sunt dicta, fuga error delectus nam quam laudantium 
 debitis est adipisci? Similique, nemo? Veniam, enim!
 </p>
Enter fullscreen mode Exit fullscreen mode

Now decide what text you want to be the clickable text, and wrap it in an <a> tag.

Then, add the following paramaters to your anchor tag.

 <a href="#" data-toggle="modal" data-target="#paragraphModal">click here</a>
Enter fullscreen mode Exit fullscreen mode

What's important here is the following: the blank href tag turns it into a viewable link. It will work without it but it gives it the default bootstrap anchor tag appearance if we include it.

The data-toggle="modal" specifics that this toggles the modal.

The most important pieces, however, is the data-target="#paragraphModal". The parameter we give to the data-target needs to match the id of the modal. We have given our modal the id of paragraphModal, so now we specify the target is #paragraphModal. We must make sure we include the # to specify that we're looking for an id.

And voila, now we have a working modal that launches via clicking text rather than a button!

Gif

Accessibility Solution

It's important to not that using an inline <a> like this does not promote accessibility as <a> are usually external links, where as modals operate off of buttons.

This concerns was brought to my attention and I think it's important to showcase the proper solution that allows for more accessibility.

Let's remove the <a> and using <button> instead. For starters, alter the code to look like this:

 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing 
 elit. Minima optio consectetur repudiandae rerum nesciunt 
 esse, sunt dicta, <button type="button" data- 
 toggle="modal" data-target="#paragraphModal">click 
 here</button>  fuga error delectus nam quam laudantium 
 debitis est adipisci? Similique, nemo? Veniam, enim!
 </p>
Enter fullscreen mode Exit fullscreen mode

What was previously the <a>, is now:

 <button type="button" data-toggle="modal" data- 
 target="#paragraphModal">click here</button>
Enter fullscreen mode Exit fullscreen mode

Currently the change looks like this:

Inline button view

So now, we just need to add styling to remove the button features. Let's create a class and call it text-btn.

 <button class="text-btn" type="button" data- 
 toggle="modal" data-target="#paragraphModal">click 
 here</button>
Enter fullscreen mode Exit fullscreen mode

Let's add css. You can either do it inline (not recommended), or via an external style sheet. Either way, the CSS will vary based on your preference, but I did this:

 .text-btn {
   border: none;
   background: none;
   color: navy;
   text-decoration: underline;
   padding: 0;
 }
Enter fullscreen mode Exit fullscreen mode

This now looks like our standard link again:

Button disguised as a normal link

And there you have it! Better accessibility using semantic code that allows screen-readers to better understand your code, all while creating the exact same output!

Thanks @gracesnow for reminding us while accessibility is so important!

Discussion (4)

Collapse
gracesnow profile image
Grace Snow • Edited on

Hi Amy

I tried to write a comment on this but it wouldn't post. I hope this works.

Can I ask you to remove or amend this article please so it uses accessible code? This is a recipe for exclusion and should never happen.

It's so so important to use the correct interactive elements.

Buttons can be styled as links. Promote that solution instead πŸ™

Collapse
amyoulton profile image
Amy Oulton Author

Hi Grace. While I totally agree that exclusion is a massive problem and want to be as inclusive as possible, this was posted as response as a specific request from a Twitter user looking to learn how to apply the modal button principles to varying things. In the specific example, it's about text, but the focus of the post is to showcase what the working pieces of Bootstrap modals are.

I will put a disclaimer at the beginning of this post, but since it was added with the intention of solving a specific problem (for someone try to grasp concepts, not do best practice) I will keep the post up as a response the that question.

Collapse
amyoulton profile image
Amy Oulton Author

Check out the post now to find both a disclaimer at the top, and another solution using proper accessibility!

Collapse
gracesnow profile image
Grace Snow

Totally understand. Well done on the quick amends πŸ‘