如何使用Jquery在跨度點擊中顯示Modal？

Question

這是我的Jquery腳本，用於顯示Modal：

$('.cssbuttongo').click(
function() 
{
 $('#myModal').modal('show');
});

這是.cssbuttongo工作的位置：

 <span class="cssbuttongo">Login</span>
                                        <span class="cssbuttongo">Register</span>

這是我稱呼我的模態的地方：

           <div id="myModal" class="modal fade" 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">Authentication</h4>
              </div>
              <div class="modal-body">
                <ul class="nav nav-tabs">
....

點擊不顯示任何內容。

如何解決這個問題？

  <script src="/js/vendor/jquery-1.11.2.min.js"></script> <script src="/js/vendor/bootstrap.min.js"></script> <script src="https://momentjs.com/downloads/moment.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script> <script src="/js/jquery-easing/jquery.easing.1.3.js"></script> <script src="/js/wow/wow.min.js"></script> <script src="/js/plugins.js"></script> <script src="/js/main.js"></script> 

  <!--- Google Maps ! ----> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAZSFaWC5HQA0ixyI-QXBE5EMAMnTCaY80"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script> <script src="/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> <script src="/js/login.js"></script> <script src="/js/ajaxforms.js"></script> 

Answer 1

我修復了它， 您的html代碼上沒有任何模態 ，我的意思是您沒有模態結構，模態結構需要頁眉，正文和頁腳才能正常工作。 您必須定義所有這些。

我修好了它。 看一下我的代碼片段：

 $('.cssbuttongo').click(function (){ $('#myModal').modal('show'); }); 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script> <span data-toggle="modal" data-target="#mymodal" class="cssbuttongo">Register</span> <div class="modal fade" id="mymodal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Cssbutton Modal</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <p>Hello I'm your modal!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

您不會看到按鈕樣式，因為您沒有在此cssbuttongo類中添加任何css，這就是為什么您只會看到“注冊”字樣的原因。 如果單擊“注冊”，現在將看到模式。 希望能幫助到你