Bootstrap 3 - 将自动加载模式定位在某个 div 上

Question

我有一个在页面加载 3 秒内出现的模式。

我想更改默认位置以将其放置在我选择的某个位置附近（在下面的示例中，它位于 id=zone1 的跨度上）

<div id="deal-zone">
  <div class="area">
    <span class="thezone" id="zone1" data-toggle="modal" data-target="#myModal"/></span>   
  </div>
</div>

<!-- Here is the modal -->
<div class="modal in" id="notificationModal" role="dialog" aria-labelledby="notificationModalLabel" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h3 class="modal-title" id="notificationModalLabel" style="color:#DF2943;">
          How to take part in the deal?
        </h3>
      </div>
      <div class="modal-body">   
        <h4 style="margin-top:0px">
        explanations
      </h4>

      </div>

    </div>
  </div>
</div>

<!-- Script that makes the modal autoload on page load -->     
<script type="text/javascript">
  $(window).load(function(){
    $('#notificationModal').modal('show');    
    $('#notificationModal').fadeTo(3000, 500).slideUp(500, function(){
      $(this).remove(); 
    });

  });
</script>

我怎样才能做到这一点？

这里有一个 JSFIDDLE 可以提供帮助：http://jsfiddle.net/DTcHh/6941/：我想将模态框放在“这里”这个词的上方一点，并且仍然能够阅读“这里”这个词（就像一个指向“这里”这个词的工具提示）

Answer 1

这都是关于 CSS 定位的。这是如何实现的一个示例。

CSS：

.testbox {
    background: #000000;
    color: #FFFFFF;
    padding: 10px;
    min-height: 200px;
}
.testbox .modal{ 
    color: #333;
}

/* overwriting default behaviour of Modal Popup in Bootstrap  */
body{ 
    overflow: auto !important;
}
.modal{ 
    overflow: hidden; 
}

/* created new class for targetting purpose - named ".modal2", ".modal1" */
.modal2.in{ 
    position: absolute; 
    bottom: 0; 
    right:0; 
    left: auto; 
    top: auto; 
    bottom: 0; 
    overflow: auto;
}

HTML：

<div class="testbox col-lg-6"> 
  <h3><strong>Test Box</strong></h3>

    <blockquote>
      Modal Popup should <br />open inside (or aligned to) <br />this balck DIV area.
    </blockquote>

    <!-- .modal1 -->
    <div class="modal fade bs-modal-sm modal1" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content"> 
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Default Modal Popup</h4>
                  </div>

                  <div class="modal-body">
                    Modal 1 Popup Content
                  </div>
            </div>
        </div>
    </div>

    <!-- .modal2 -->
    <div class="modal bs-modal-sm col-sm-12 col-xs-12 modal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content"> 
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Bound to <strong>Test Box</strong> DIV</h4>
                  </div>

                  <div class="modal-body">
                    Modal 2 Popup Content 
                  </div>
            </div>
        </div>
    </div>
</div>

Answer 2

您可以使用.offset() 获取您想要定位的元素的位置，然后根据元素在视口中的位置使用一些数学来更改模态的margin-top。

BOOTPLY

jQuery：

var location = $('#zone1').offset();

    $('#notificationModal').css("margin-top", location.top - 100);
    $('#notificationModal').modal('show');    
    $('#notificationModal').fadeTo(3000, 500).slideUp(500, function(){
      $(this).remove(); 
    });

HTML：

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>


    <div class="jumbotron">
        <h1>Twitter Bootstrap 3.0</h1>
        <p class="lead">Starter template with CSS and JS included.</p>
        <p><a class="btn btn-lg btn-primary" href="http://yahoo.fr" target="_blank">link</a></p>
      </div>
        <div class="area">
          <span class="thezone" id="zone1" data-toggle="modal" data-target="#myModal">HERE</span> i want to put the modal just above this word and still be able to see the word "HERE"  
               </div>
          <div class="area2">
          <span class="thezone2" id="zone2" data-toggle="modal" data-target="#myModal"></span>   
               </div>

    <div class="modal in" id="notificationModal" role="dialog" aria-labelledby="notificationModalLabel" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h3 class="modal-title" id="notificationModalLabel" style="color:#DF2943;">
          How to take part in the deal?
           </h3>
      </div>
      <div class="modal-body">   
        <h4 style="margin-top:0px">
        some explanations
      </h4>

      </div>

    </div>
  </div>
</div>
</div></div>


            <div id="push"></div>

CSS：

body {
    margin: 10px;
}

Answer 3

最简单的解决方案就是将其放置在 CSS 中。 这不是很好，但让我们从这里开始吧。也许我们可以用 javascript 或其他东西让它变得更好/可变。

.modal-dialog {
    position: absolute;
    top: 160px;
}

http://jsfiddle.net/DTcHh/6943/