试图在父模式

时间:2015-09-02 20:30:51

标签: twitter-bootstrap jquery-ui

我正在研究一个真正的项目,试图找到一种在父模态之外拖动引导子模态的方法。我能够做到的一种方法是将子模态移动到父级之外的另一个<div>。我通过使用jQuery&#39; $()。detach()。appendTo()来做到这一点。是否可以在不移动子模态元素的情况下创建相同的行为?

这是一个简化示例和一个工作插件(http://plnkr.co/JwWJbZ3NR44xaCpoXZ3g?p)。

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

</head>
<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
    Open Parent Modal
  </button>

  <div>
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header brown-color">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title">Parent Modal</h4>
          </div>
          <div class="modal-body light-brown-color">
            <p>This is the parent body...</p>
            <input type="text" placeholder="First Name..." />
            <br />
            <input type="text" placeholder="Last Name..." />
            <br />
            <input type="text" placeholder="Address..." />
            <br />
            <textarea rows="4" cols="50" placeholder="Write here..."></textarea>

            <div>
              <!-- Button trigger modal -->
              <button type="button" id="childbutton" class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal2">
                Open Child Modal
              </button>

              <!--Adding child modal-->
              <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header brown-color">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                      </button>
                      <h4 class="modal-title">Child Modal</h4>
                    </div>
                    <div class="modal-body ex-light-brown-color">
                      <p>This is the child body...There are different ways one can create the modals. This is called a static modal. </p>
                      <textarea rows="4" cols="50" placeholder="Write here..."></textarea>
                    </div>
                    <div class="modal-footer brown-color">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                  <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
              </div>
              <!-- /.modal fade -->
            </div>
            <!-- /.modal -->

            <!--End of child modal-->

          </div>
          <div class="modal-footer brown-color">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal fade -->
  </div>
  <!-- /.modal -->

  <!--Move child modal here. -->
  <div id="testdiv"></div>
</body>
</html>

<script>
  $(document).ready(function() {
    $('.modal-dialog').draggable();
    $('#myModal2').detach().appendTo('#testdiv');
  }); 
</script>

0 个答案:

没有答案