Bootstrap 3 - Position auto-loading modal over a certain div

Question

I have a modal that appears at page load during 3 seconds.

I would like to change the default position to place it near a certain I choose (it would be in the example below on the span with 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>

How can I achieve this ?

Here is a JSFIDDLE to help : http://jsfiddle.net/DTcHh/6941/: I want to put the modal just a little above the word "HERE" and still be able to read the word HERE (like a tooltip pointing to the word "HERE")

Answer 1

You can get the position of the element you're wanting to target with .offset(), and then use a bit of math to change the margin-top of the modal based on where the element is in the viewport.

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 2

The simplest solution would just be that you position it in CSS. It is not very nice, but let's go from here. Maybe we could make it better/variable with javascript or something.

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

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

Answer 3

It's all about CSS positioning. Here's one example of how it can be accomplished.

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>