Question

我有一个用jquery / bootstrap制作的页面，下面的代码在点击时会打开一个模态：

<a class="projects" data-id="test.html" 
   href="#modal" data-modal-target="#modal" data-modal-effect="fadein">
   LOAD CONTENT
</a>

在页面中更多我有模态div：

<div id="modal" style="display: none;">
  <h4>Modal title</h4>
  <p>dummy description</p>
  <div id="dinamiccontent">X</div>
</div>

然后我有这个脚本：

<script type="text/javascript">
$(document).ready(function(){
   $(".projects").click(function(){
       var lurl = String($(this).data('id'));
       $("#dinamiccontent").load(lurl);
   });
});            
</script>

问题在于，当我点击链接时，模式会正确打开并在X dinamiccontent显示div时显示test.html的内容，但是如果我第二次点击相同的链接，它会打开模式并正确显示test.html内容！

我花了几个小时阅读文档，答案和网站，并对代码进行了很多更改，但我无法提出解决方案。

我想在第一次点击上面的链接时加载test.html dinamiccontent中预先加载div内容的模式。有可能吗？

Answer 1

我实际上能够使用Bootstrap 3.3.7和4.0.0-alpha.6

获得此版本的工作版本

我确实重组了你的模态以遵循Bootstrap指南，它需要的不仅仅是id="modal"。我还在切换模态的链接中更改了属性。分别尝试这些更改中的每一个，看看他们是否可以修复它。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>

<body>
  <a class="projects" href="" data-id="test.html" data-toggle="modal" data-target="#modal"> <!-- Note the 'data-toggle' and 'data-target' -->
     LOAD CONTENT
  </a>

  <div class="modal fade" id="modal" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">

        </div>
      </div>
    </div>
  </div>

  <script>
    $(function() {
      $(".projects").click(function() {
        var lurl = String($(this).data('id'));
        $(".modal-body").load(lurl);
      });
    });
  </script>
</body>

</html>

以下是检查结果的链接：https://glitch.com/edit/#!/chatter-polish

jquery在modal div中加载内容，它仅在第二次点击时显示内容

1 个答案: