在另一个 div 内引导模态窗口

问题描述 投票：0回答：3

我的引导模式工作正常。 我的问题是我需要将模态窗口（包括灰色背景）应用到网站的 div 上，而不是应用到正文上。 我有以下结构：

<div class="bigform-content">
    <div class="wpcol-one col-md-6">
        </div>
    <div class="wpcol-one col-md-6">
        </div>
</div>
<!-- Modal -->
        <div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">

              <div class="modal-body">
                <p>You didn't move the map pin, are you sure it is on your address/house?</p>
              </div>
              <div class="modal-footer">
                <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
                <span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

现在模态窗口已正确打开，但我需要在第一个 div 上看到它，并且在模态窗口打开时可以单击另一个 div。

您能给我一个解决方案吗？ 太感谢了， 拉卢卡。

css twitter-bootstrap modal-dialog
3个回答
22
投票

这是我刚刚使用您的代码并对其进行了一些调整的示例。

单击此处并观看其工作情况

如何解决：

$(function () {
  
  //getting click event to show modal
    $('#submit-button').click(function () {
        $('#dialog_confirm_map').modal();
      
      //appending modal background inside the bigform-content
        $('.modal-backdrop').appendTo('.bigform-content');
      //removing body classes to enable click events
        $('body').removeClass();
    });

  
  //just to prove actions outside modal
    $('#help-button').click(function () {
        alert("Action with modal opened or closed");
    });
  //end just to prove actions outside modal
});
.bigform-content {
    border: solid 5px #DDD;
    margin: 30px 20px;
    overflow: hidden;
    padding:20px;
    position:relative;
}
.modal, .modal-backdrop {
    position: absolute !important;
}
.bigform-content h1 {
    margin:0;
}
.bigform-content input[type=submit] {
    margin-top:10px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="bigform-content">
    <div class="wpcol-one col-md-6">
         <h1>Hi, this is my form title</h1>

    </div>
    <div class="wpcol-one col-md-6">
        <p>This is my form</p>
        <label for="field-one">Field 1:</label>
        <input id="field-one" class="form-control" type="text" />
        <label for="field-two">Field 2:</label>
        <input id="field-two" class="form-control" type="text" />
        <label for="field-three">Field 1:</label>
        <input id="field-three" class="form-control" type="text" />
        <input id="submit-button" type="submit" value="Submit my form" class="btn btn-default" />
    </div>
    <!-- Modal -->
    <div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>You didn't move the map pin, are you sure it is on your address/house?</p>
                </div>
                <div class="modal-footer"> <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
 <span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
<p>Content outside div and modal</p>
<p>Hope it
    <input id="help-button" type="button" value="helps" class="btn btn-success" />
</p>

1
投票

感谢wilsotobianco的回答。 为了供将来参考，我也发布了我的解决方案。如果您需要多个模态，这适用于所有模态，而无需为每个模态编写额外的 JS。

像通常在引导程序中一样设置它们。触发器只需要类 

.js-modal-rel-trigger
并需要删除属性 
data-toggle="modal"
，因为我们使用 JS 来切换它。

模态需要一个自定义类，在我的例子中

.modal-rel
给它一个更小的
z-index
和
position: absolute;
。

出于同样的原因，背景也被分配了类别 

.modal-rel-backdrop
。

$('.js-modal-rel-trigger').click(function() {
    var modalId = $(this).attr('data-target');
    $(modalId).modal();

    $('.modal-backdrop').addClass('modal-rel-backdrop').appendTo($(modalId).parent());
    $('body').removeClass('modal-open');
});
body {
    background: #F3F5F6 !important;
}

.container {
    top: 50px;
    background: #fff;
    margin: 0 auto;
    width: 80%;
    padding: 20px;
    position: relative;
}

.modal.modal-rel {
    position: absolute;
    z-index: 51;
}

.modal-backdrop.modal-rel-backdrop {
    position: absolute;
    z-index: 50;
    // Fade for backdrop
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container">
    <div class="content">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
        <br> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
        <br>no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#myModal">
        Abs. Modal
    </button>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#mySecondModal">
        Second abs. modal
    </button>
    
        <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-target="#myNormalModal" data-toggle="modal">
        Default Modal
    </button>

    <!-- Modal -->
    <div class="modal modal-rel fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    Hi, I am positioned absolute!
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-rel fade" id="mySecondModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal Second title</h4>
                </div>
                <div class="modal-body">
                    Hi, I also am positioned absolute!
                </div>
            </div>
        </div>
    </div>
    
        <div class="modal fade" id="myNormalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Normal Modal</h4>
                </div>
                <div class="modal-body">
                    h0i. I have fixed positioning!
                </div>
            </div>
        </div>
    </div>
</div>

0
投票

这是简化的解决方案。

   <div id="myModalContainer" style="width: 900px; height: 400px; border: 1px solid black; position: relative;">
             Your bootstrap modal
        </div>

CSS：

.modal {
      max-width: none !important;
      width: 100%;
      max-height: none !important;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.