How to pop custom modal on a:href?

Question

How to pop custom modal on a:href?

140 Views Asked by Giorgio Vitanza At 17 April 2025 at 19:52

I'm new to web coding, and I've been trying to make the custom modal show up clicking "About", but it simply doesn't happen, and I really have no clue of why, anyone knows? I put my full website, including CSS, because I simply don't know what's compatible and what's not compatible with bootstrap modal.

<!DOCTYPE html>
<html>
<head>

  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
  <title>Documento senza titolo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="Style.css">
  <link rel="icon" href="Senza titolo-1.ico">
</head>
<body>
  <div id="main">
    <br>
    <br>
    <div id="abovenavigation">
      <ul class="container">
        <li>
          <h1 class="About"><a href="#" data-toggle="modal" data-target="#myModal">ABOUT</a></h1>
        </li>
      </ul><!--ends container-->
    </div>
  </div>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-="" dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Original Q&A

There are 1 best solutions below

**Tim Lewis** · Accepted Answer

You really need to read up on the manual for modals. The easiest way is giving your <a id="btn-show-modal"> a few extra attributes, namely data-toggle="modal" and data-target="#dialog-example". Next, you're missing a few divs in your modal's structure:

<div class="modal fade" id="dialog-example">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Hi! Do You Want To Join My Fun English Course? Here's What You Need to Know!</h1>
      </div>

      <div class="modal-body">
        <pre>Cost Per Lesson: 10€; Hours Per Lesson: 1,30h; Days a Week: Monday to Thursday;</pre>    
      </div>

      <div class="modal-footer">
        <a href="#" class="btn">Close</a>
      </div>
    </div>
  </div>
</div>

Notice the modal-dialog and modal-content; both were missing from your markup and causing weird behaviors. Also, I'm not sure what modal hide is. Please read here for more information: http://getbootstrap.com/javascript/#modals

Live Demo: Bootply

How to pop custom modal on a:href?

There are 1 best solutions below

Related Questions in HTML

Related Questions in JQUERY

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Trending Questions

Popular # Hahtags

Popular Questions