弹出窗口中的手风琴，颜色框/模态 Bootstrap [英] Accordion inside popup, colorbox / modal Bootstrap

查看：29
本文介绍了弹出窗口中的手风琴，颜色框/模态 Bootstrap的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在弹出窗口中实现手风琴.是否可以?我尝试用 colorbox 来做，但似乎不可行，所以我尝试使用 bootstrap modal，但似乎我很困惑.

<头><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 - 模态演示</title><link href="css/bootstrap.min.css" rel="样式表"><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 });});<身体><div class="容器"><h2 style="text-align: center;">Bootstrap 3.1.0 - 模态演示</h2><div class="row text-center"><h3>基本模态</h3><a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">点击打开Modal</a>

<小时>

<div class="modalfade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div id="手风琴">手风琴外的文字/内容<h3><a href="#">第 1 节</a></h3><div><p>第 1 节内</p>

<h3><a href="#">第 2 节</a></h3><div><p>第 2 部分内</p>

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

感谢您的帮助.

解决方案

你的JQuery代码不完整，修改:

$("#accordion").accordion({自动高度:真});

致:

$(function() { $("#accordion").accordion({自动高度:真});});

参见演示

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>

My full code : http://jsfiddle.net/g6HA4/2/

Thanks for any help.

解决方案

Your JQuery code is not complete, change:

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

To:

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

See Demo

这篇关于弹出窗口中的手风琴，颜色框/模态 Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆