Javascript 使用引导的模式弹出窗口_Javascript_Jquery_Html_Ajax_Bootstrap Modal

Javascript 使用引导的模式弹出窗口

javascript jquery html ajax

Javascript 使用引导的模式弹出窗口,javascript,jquery,html,ajax,bootstrap-modal,Javascript,Jquery,Html,Ajax,Bootstrap Modal,我对html和javascript非常陌生。我试图在index.html文件中弹出一个模式，但当我使用href时，它只是转到另一个页面。当我在index.html文件中编写modal.html时，它完全可以正常工作。它与我的css设计很好地结合在一起，但是当我把它放在一个单独的文件中时，它会把我带到另一个页面。如果我将它们保存在同一个索引文件中，我的索引页中将有很多模态。所以如果我能把它们放在不同的文件里就好了这是我的index.html <div id="three"> <

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

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

证书程序

这是my 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>


&时代；
网络技术证书
这门课需要三门课

IT 360网络简介（4）
IT 460网络和秒协议（4）
IT 462网络管理和程序（4）
IT 483 Web应用程序和用户交互（4）

接近

您应该添加如下按钮或链接：

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

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

注意data target=“examplemodel”，这应该是模态的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，或设置如下：

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

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

所以最后你会有这样的结果：

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

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

证书程序

我还建议在此场景中使用无序列表。

如下更改标记

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

在index.html页面中将您的模式id指定给href。

，请使用此选项。您必须使用href和数据目标

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


这门课需要三门课

IT 360网络简介（4）
IT 460网络和秒协议（4）
IT 462网络管理和程序（4）
IT 483 Web应用程序和用户交互（4）

如果使用Jquery是一个选项

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>

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

证书程序
$（'[data toggle=“modal”]'）。单击（函数（e）{
e、 预防默认值（）；
var modal=$（本）；
$.ajax({
url:modal.attr（'href'），
数据类型：“文本”，
成功：功能（数据）{
$（'body'）。追加（数据）；
$（modal.attr（'data-target'））.modal（'show'）；
}
});
});

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>


&时代；
网络技术证书
这门课需要三门课

IT 360网络简介（4）
IT 460网络和秒协议（4）
IT 462网络管理和程序（4）
IT 483 Web应用程序和用户交互（4）

接近

您的

数据目标是无效的css选择器。您必须是data target=“myModal”
必须是data target=“#myModal”
我已经修复了这个问题，但仍然不起作用。modal和trigger在单独的html文件中吗？如果是，则尝试将内容放在一个文件中如果我将内容放在一个文件中，则效果很好，但我在一个页面中有许多模态内容，这就是为什么我希望模态内容有单独的文件。有没有办法从单独的文件中调用模式内容？也许这会有帮助[谢谢你的回答。是的，按照你说的方式，它会起作用，但我想将我的模式保存在一个单独的html文件中，我想在单独的文件的索引模式框中调用它们。我将有大量的模式内容，所以我负担不起将所有html保存在索引文件中。好的，那么你将需要ajax来实现这一点。请尝试一些e以下链接：-；这以前存在于引导中，但现在您必须手动执行。href不接受模式id。这已经是一个问题。请检查此问题，