Question

我的模态联系表格有问题。它不会加载我做了我必须做的一切。

这是我的代码：

<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@gmail.com (abychom Vás mohli kontaktovat)" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user@gmail.com)" 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-index的问题。如果有必要，我会发布。

Answer 1

尝试正确使用所有外部链接，现在你的引导模式将正常工作

＆＃13;

.py-2{margin-left:0px}

＆＃13;

<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@gmail.com (abychom Vás mohli kontaktovat)" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user@gmail.com)" 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>

＆＃13;

Answer 2

将链接中的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>

Bootstrap 4模态不会从href加载

2 个答案: