Question

我的bootstrap模式运行正常。我的问题是我需要将模态窗口（包括灰色背景）应用于网站上的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在模态窗口打开时可以点击。

你能帮我解决一下吗？非常感谢，拉卢卡。

Answer 1

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

Click here and watch it working

如何解决：

＆＃13;

$(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
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

像在bootstrap中一样设置它们。触发器只需要类QL_VAL QL_ID MEASUREMENT_DATE 25 P14404 01-JUL-10 30 P14404 15-JUL-10 21 P14404 29-JUN-10，并且需要删除属性.js-modal-rel-trigger，因为我们要用JS切换它。

模式需要一个自定义类，在我的情况data-toggle="modal"中，它需要一个较小的.modal-rel和z-index。

由于同样的原因，背景也会获得分配的position: absolute;课程。

＆＃13;

.modal-rel-backdrop

＆＃13;

$('.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');
});

＆＃13;

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
}

＆＃13;

另一个div里面的Bootstrap模态窗口

2 个答案: