Question

这是我的Jquery脚本，用于显示模态：

$('.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代码上没有任何模态，我的意思是你没有模态结构，模态结构需要标题，正文和页脚能够工作。你必须定义所有这些。

我修好了。看看我的片段：

＆＃13;

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

＆＃13;

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

＆＃13;

您不会看到按钮样式，因为您没有使用此 cssbuttongo类添加任何CSS，这就是为什么您只会看到＆＃34;注册＆＃34 ; 字。如果您现在点击＆＃34;注册＆＃34; ，您会看到模式。希望它有所帮助

如何使用Jquery在单击span中显示Modal？

1 个答案: