CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-modalbootstrap-4
user7996946
user7996946

Reputation:

Bootstrap 4 modal wont load from a href

I have a problem with my modal contact form. It wont load I did everything I had to do.

Here is my code:

<div class="row py-2">
              <div class="col-sm-3 hidden-md-down">
                <a class="bg-circle bg-primary" data-toggle="modal" href="#myModal">
                  <i class="fa fa-2x fa-fw fa-address-card" aria-hidden="true "></i>
                </a>
              </div>
              <div class="col-sm-9">
                <h4>Kontaktujte nás</h4>
                <p>Proč ne? Rádi Vám poradíme</p>
              </div>
            </div>

<div id="myModal" class="modal fade" 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-hidden="true">×</button>
        <h3 id="myModalLabel">Rádi Vám poradíme napište nám!</h3>
      </div>
      <div class="modal-body">
        <form class="form-horizontal col-sm-12">
          <div class="form-group"><label>Jméno a příjmení</label><input class="form-control required" placeholder="Vaše jméno a příjmení" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters." type="text"></div>
          <div class="form-group"><label>Zpráva</label><textarea class="form-control" placeholder="Vaše zpráva zde.." data-placement="top" data-trigger="manual"></textarea></div>
          <div class="form-group"><label>E-Mail</label><input class="form-control email" placeholder="[email protected] (abychom Vás mohli kontaktovat)" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address ([email protected])" type="text"></div>
          <div class="form-group"><label>Telefoní číslo</label><input class="form-control phone" placeholder="777777777" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text"></div>
          <div class="form-group"><button type="submit" class="btn btn-success pull-right">Odeslat</button> <p class="help-block pull-left text-danger hide" id="form-error">&nbsp; The form is not valid. </p></div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
      </div>
    </div>
  </div>
</div>

I have a footer with contact us icon and when I click nothing happens I don't know If its problem with absolute position or z-index. If it will be necessary I will post it.

Upvotes: 0

Views: 7776

Answers (2)

Udhay Titus
Udhay Titus

Reputation: 5869

try to use all external links correctly, now your bootstrap modal will working fine

.py-2{margin-left:0px}
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>

<div class="container">
 <div class="row py-2">
              <div class="col-sm-3 hidden-md-down">
                <a class="bg-circle bg-primary" data-toggle="modal" href="#myModal1">
                  <i class="fa fa-2x fa-fw fa-address-card" aria-hidden="true "> </i>
                </a>
              </div>
              <div class="col-sm-9">
                <h4>Kontaktujte nás</h4>
                <p>Proč ne? Rádi Vám poradíme</p>
              </div>
            </div>

  <!-- Modal -->
  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Rádi Vám poradíme napište nám!</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal col-sm-12">
          <div class="form-group"><label>Jméno a příjmení</label><input class="form-control required" placeholder="Vaše jméno a příjmení" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters." type="text"></div>
          <div class="form-group"><label>Zpráva</label><textarea class="form-control" placeholder="Vaše zpráva zde.." data-placement="top" data-trigger="manual"></textarea></div>
          <div class="form-group"><label>E-Mail</label><input class="form-control email" placeholder="[email protected] (abychom Vás mohli kontaktovat)" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address ([email protected])" type="text"></div>
          <div class="form-group"><label>Telefoní číslo</label><input class="form-control phone" placeholder="777777777" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text"></div>
          <div class="form-group"><button type="submit" class="btn btn-success pull-right">Odeslat</button> <p class="help-block pull-left text-danger hide" id="form-error">&nbsp; The form is not valid. </p></div>
        </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Upvotes: 0

Mark
Mark

Reputation: 209

Change href in your link to data-target

<a class="bg-circle bg-primary" data-toggle="modal" data-target="#myModal">
    <i class="fa fa-2x fa-fw fa-address-card" aria-hidden="true "></i>
</a>

Upvotes: 1

Related Questions