使用引导程序的模态弹出窗口答案

【问题标题】：Modal Pop-up using bootstrap使用引导程序的模态弹出窗口
【发布时间】：2019-01-15 10:02:33
【问题描述】：

我对 html 和 javascript 非常陌生。我试图在我的 index.html 文件中弹出一个模式，但是当我使用 href 时，它只是转到另一个页面。当我在 index.html 文件中编写 modal.html 时，它工作得很好。它与我的 css 设计很好地弹出，但是当我将它放在一个单独的文件中时，它会将我带到另一个页面。如果我将它们保存在同一个索引文件中，我的索引页面中会有很多模式。因此，如果我可以将它们放在单独的文件中，那就太好了。

这是我的 index.html

<div id="three"> <div class="certificate"> Certificate Programs</div>
           <div class="button" id="net" data-toggle="modal" data-target="myModal"> <a href='modal.html' class="myButton">Networking Tech</a></div>
            <div class="button"><a href="#" class="myButton">Information Security</a></div>
           <div class="button"><a href="#" class="myButton">Software Development</a></div>
           <div class="button"><a href="#" class="myButton"> Database Technology Certificate</a></div>         
</div>

这是我的 modal.html：

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
    <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">Network Technology Certificate</h4>
            </div>
            <div class="modal-body">
                <p>Need any three courses for this cetificate.</p>
                <ul>
                    <li>IT 360 Intro to Networking(4)</li>
                    <li>IT 460 Net& Sec Protocol (4)</li>
                    <li>IT 462 Net Administration and Progr (4)</li>
                    <li>IT 483 Web Application and User Inter (4)</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

您的 data-target 是无效的 CSS 选择器。你有data-target="myModal" 必须是data-target="#myModal"
我修好了，但还是不行。
modal 和 trigger 在单独的 html 文件中？如果是，则尝试将内容放在一个文件中
如果我将内容放在一个文件中，那么它可以正常工作，但是我在一页中有许多模态内容，这就是为什么我想要为我的模态内容单独的文件。有什么方法可以从单独的文件中调用模态内容？
也许这会有所帮助 [plnkr.co/edit/Y7jDj2hORWmJ95c96qoG?p=preview]

标签： javascript jquery html ajax bootstrap-modal

【解决方案1】：

你应该像这样添加按钮或链接：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"></button>

注意 data-target="exampleModal"，这应该是你的 modal 的 id。在您的情况下，它是“myModal”。

这将始终将您重定向到新页面，因为它是 div 内的链接，并且它不知道它必须打开模式：

<div class="button" id="net" data-toggle="modal" data-target="myModal"> <a href='modal.html' class="myButton">Networking Tech</a></div>

尝试更改 CSS，或设置如下：

<a href="#" class="button" data-toggle="modal" data-target="#exampleModal">Networking Tech</a>

所以最后你会得到这样的东西：

<div id="three"> <div class="certificate"> Certificate Programs</div>
           <a href="#" class="button" data-toggle="modal" data-target="#exampleModal">Networking Tech</a>
            <div class="button"><a href="#" class="myButton">Information Security</a></div>
           <div class="button"><a href="#" class="myButton">Software Development</a></div>
           <div class="button"><a href="#" class="myButton"> Database Technology Certificate</a></div>         
</div>

我还建议在这种情况下使用无序列表。

【讨论】：

感谢您的回答。是的，你说它会起作用，但我想把我的模态保存在一个单独的 html 文件中，我想在单独的文件的索引模态框中调用它们。我将拥有大量的模态内容，因此我无法将所有 html 都保留在索引文件中。
好的，那么您将需要 ajax 来实现这一点。请尝试以下一些链接： - codexworld.com/… ; stackoverflow.com/questions/14971766/…
以前在 bootstrap 中存在这个，但现在你必须手动完成。

【解决方案2】：

如下更改您的标签。

<a data-toggle="modal" href="#myModal" class="myButton">Networking Tech</a>

将您的模态 ID 提供给 href。

【讨论】：

href 不采用模态ID。
这是已经被问到的问题。请检查这个，stackoverflow.com/questions/32958219/…

【解决方案3】：

在 index.html 页面中使用这个。你必须使用 href 和 data-target

<a href="modal.html" data-toggle="modal" data-target=".test-form" class="btn btn-primary">booking enquiry</a>   

<div id="myModal19" class="modal fade test-form" role="dialog" style="background:rgba(0,0,0,0.8);">
    <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content"> </div>
    </div>
  </div>

在 modal.html 中

<div class="modal-body">
                <p>Need any three courses for this cetificate.</p>
                <ul>
                    <li>IT 360 Intro to Networking(4)</li>
                    <li>IT 460 Net& Sec Protocol (4)</li>
                    <li>IT 462 Net Administration and Progr (4)</li>
                    <li>IT 483 Web Application and User Inter (4)</li>
                </ul>
            </div>

【讨论】：

【解决方案4】：

如果使用 Jquery 是一个选项

index.html

<div id="three"> <div class="certificate"> Certificate Programs</div>
    <a data-toggle="modal" href="myModal.html" data-target="#myModal" >Networking Tech</a>
        <div class="button"><a href="#" class="myButton">Information Security</a></div>
       <div class="button"><a href="#" class="myButton">Software Development</a></div>
       <div class="button"><a href="#" class="myButton"> Database Technology Certificate</a></div>
</div>
<script>
$('[data-toggle="modal"]').click(function(e) {
    e.preventDefault();
    var modal = $(this);
    $.ajax({
        url: modal.attr('href'),
        dataType: 'text',
        success: function(data) {
            $('body').append(data);
            $(modal.attr('data-target')).modal('show');
        }
    });
});
</script>

myModal.html

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
<!-- Modal content-->   
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Network Technology Certificate</h4>
</div>
<div class="modal-body">
<p>Need any three courses for this cetificate.</p>
<ul>
    <li>IT 360 Intro to Networking(4)</li>
    <li>IT 460 Net& Sec Protocol (4)</li>
    <li>IT 462 Net Administration and Progr (4)</li>
    <li>IT 483 Web Application and User Inter (4)</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

【讨论】：