手风琴里面有popup,colorbox / modal Bootstrap [英] Accordion inside popup, colorbox / modal Bootstrap

查看:69
本文介绍了手风琴里面有popup,colorbox / modal Bootstrap的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在弹出窗口中实现手风琴。可能吗?
我试着用colorbox做,但似乎不可行,所以我尝试使用bootstrap模态,但似乎我感到困惑。

I want to achieve an accordion inside popup. Is it possible? I tried to do it with colorbox, but seems it's not feasible, so I try to use bootstrap modal, but seems I got confused.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3.1.0 - Modal Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function() {
         $("#accordion").accordion({ autoHeight: true });
    });
    </script>
  </head>
  <body>
    <div class="container">
        <h2 style="text-align: center;">Bootstrap 3.1.0 - Modal Demo</h2>
        <div class="row text-center">
            <h3>The Basic Modal</h3>
            <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a>
        </div>
        <hr>
    </div>

    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div id="accordion">
          Text / content outside accordion
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Inside section 1
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Inside section 2
        </p>
    </div>
</div>
        </div>
      </div>
    </div>  

  </body>
</html>

我的完整代码: http://jsfiddle.net/g6HA4/2/

感谢您的帮助。

推荐答案

您的 JQuery 代码未完成,请更改:

Your JQuery code is not complete, change:

$("#accordion").accordion({
 autoHeight: true
});

收件人:

$(function() { $("#accordion").accordion({
 autoHeight: true
  });
});

参见演示

这篇关于手风琴里面有popup,colorbox / modal Bootstrap的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆