CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Ninja kornjaca
Ninja kornjaca

Reputation: 57

How to position modal box on exact position when's loaded

i have tried to find how to do this but unfortunately I haven't find anything similar. So I need to dynamically calculate the position of each image loaded in twitter modal box and position the box underneath the toolbar element which I've made. Situation is like in the image. Height of toolbar box is 40px and this should be done with javascript not with position fixed or what so ever.

enter image description here

Fiddle here

Js

$(document).ready(function () {
    // - jQuery
    // Swipe feature
    $('#myCarousel').swiperight(function () {
      $('#myCarousel').carousel('prev');
    });
    $('#myCarousel').swipeleft(function () {
      $('#myCarousel').carousel('next');
    });

    // Carousel pause
    $('.carousel').carousel({
      pause: true,
      interval: false
    });

    // Additional toolbar with "close" button appears
    $(window).on('shown.bs.modal', function () {
      $('modal').modal('show');
      $('#toolbar').css('display', 'block'); //.css('position','fixed')
      console.log('fires toolbar');
    });

    $(window).on('hidden.bs.modal', function () {
      $('modal').modal('show');
      $('#toolbar').css('display', 'none'); //.css('position','absolute')
      console.log('closes toolbar when modal is closed');
    });

    // Closes modal on toolbar
    $('.trigger').click(function () {
      $('.modal').modal('hide');
    });

    // Load dynamic images
    $('.modal-trigger img').click(function (e) {
      $('#myModal img').attr('src', $(this).attr('data-img-url'));
    });
});

Upvotes: 0

Views: 2017

Answers (1)

jme11
jme11

Reputation: 17387

I think you are making this far more complex than it needs to be. If I understood correctly, you want to have a toolbar at the top of the image that spans the entire window when the modal is displayed and you want to have the image place directly below the toolbar with no additional spacing. Assuming that is correct, you can do this with css to simply modify the existing look of the modal.

DEMO

CSS

.modal.fade.in {
    top: 0;
}
.modal {
    width: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.modal-header {
    background-color: #e3e3e3;
    background-image: linear-gradient(to bottom, #ffffff, #b8b8b8);
    background-repeat: repeat-x;
    border-color: #a9a9a9;
    border-image: none;
    border-radius: 0;
    height: 40px;
}
.modal-body {
    padding: 0;
    max-height: 100%;
}
.modal-body img {
    display: block;
    margin: 0 auto;
}
button.close {
    font-size: 14px;
    line-height: 40px;
    opacity: 1;
}

HTML:

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active"> 
            <a data-toggle="modal" href="#myModal" class="modal-trigger">
                <img src="http://placehold.it/350x150/e8117f/fff&text=Image%201" alt="" data-img-url="http://placehold.it/500/e8117f/fff&text=Image%201" />
            </a>
        </div>
        <div class="item"> 
            <a data-toggle="modal" href="#myModal" class="modal-trigger">
                <img src="http://placehold.it/350x150/9ACD32/fff&text=Image%202" alt="" data-img-url="http://placehold.it/400/9ACD32/fff&text=Image%202" />
            </a>
        </div>
        <div class="item"> 
            <a data-toggle="modal" href="#myModal" class="modal-trigger">
                <img src="http://placehold.it/350x150/FF6347/fff&text=Image%203" alt="" data-img-url="http://placehold.it/300/FF6347/fff&text=Image%203" />
            </a>
        </div>
        <div class="item"> 
            <a data-toggle="modal" href="#myModal" class="modal-trigger">
                <img src="http://placehold.it/350x150/008080/fff&text=Image%204" alt="" data-img-url="http://placehold.it/500/008080/fff&text=Image%204" />
            </a>
        </div>
    </div> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<!-- Modal window -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="toolbar" class="modal-header">
                <button class="close" data-dismiss="modal">Schließen</button>
            </div>
            <div class="modal-body">
                <img data-dismiss="modal" aria-hidden="true" src="#" class="image" alt="" />
            </div>
        </div>
    </div>
</div>

P.S. In your fiddle, you linked the bootstrap.min.js and then separately linked the files for the transitions and modal. This is unnecessary. The bootstrap.min.js file contains all of the javascript plugins in one file.

Upvotes: 2

Related Questions