ブートストラップ4モーダルはhrefからロードされません

私のモーダルコンタクトフォームに問題があります。私はしなければならなかったすべてをやりました。ブートストラップ4モーダルはhrefからロードされません

はここに私のコードです：私たちは、アイコン連絡先とフッターを持っていると私は何も起こらをクリックしていないとき、私は知らない

<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>

場合は、絶対位置またはzインデックスとの問題。それが必要なら私はそれを掲示するでしょう。

出典

2017-06-14 Anonymous

試みは、今、あなたのブートストラップモーダルがデータターゲットにあなたのリンクに細かい

.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>

出典

2017-06-14 07:18:55

変更のhrefを作業し、正常にすべての外部リンクを使用するには

<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>

出典

2017-06-14 08:51:37 Mark

ブートストラップ4モーダルはhrefからロードされません

答えて

関連する問題