另一个 div 内的引导模式窗口答案

【问题标题】：Bootstrap modal window inside another div另一个 div 内的引导模式窗口
【发布时间】：2017-06-02 16:11:46
【问题描述】：

我的引导模式运行良好。我的问题是我需要将模态窗口（包括灰色背景）应用于网站上的 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 位置：#dialog_confirm_map 上的静态

标签： css twitter-bootstrap modal-dialog

【解决方案1】：

这是我刚刚使用您的代码并对其稍作调整的示例。

Click here and watch it working

如何解决：

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

【讨论】：

我的荣幸。很高兴为您提供帮助！
@wilsotobianco 解决方案的良好开端，但我担心 $('body').removeClass();行 - 盲目地从 body 中删除所有类是不是有点危险？
@ryangriggs 是的。你是对的，我的朋友。我可以修复此示例以仅删除 Bootstrap 类。我这样做只是为了示例。感谢您的来信
@wilsotobianco 感谢您的解决方案。我是 jquery 的新手，你能告诉我如何只删除引导类吗？从 body 中删除所有类会产生奇怪的行为。
@wilsotobianco 您好，您的示例正在运行。可以修一下吗？

【解决方案2】：

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

【讨论】：