使用引導程序的模態彈出窗口

Question

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

Answer 1

您應該添加按鈕或鏈接，如下所示：

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

注意data-target =“ exampleModal”，這應該是您的模態的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>

我還建議在這種情況下使用無序列表。

Answer 2

如下更改標簽。

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

給您的模式ID到href。

Answer 3

在index.html頁面中使用它。 您必須使用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>

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