Bootstrap Modal scroll to on open
Bootstrap Modal scroll to on open
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<a id="demoModal" class="btn btn-primary btn-large" href="#commentsBox" data-toggle="modal">Give Us Your Comment</a>
<div id="commentsBox" class="modal hide fade" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal" href="#">×</a>
<h3>comments</h3>
</div>
<div id="modalBody" class="modal-body">
<a href="#" class="slideto">test</a>
<article id="1" class="journal-comment journal_comment_box row">
<header class="author span2">
<div class="author-image">
<img class="profile-image" alt="A Pougher" src="http://placehold.it/100x120">
</div>
<h5 class="user">A Pougher</h5>
<h6 class="time"> Today at 12:50 pm </h6>
</header>
<div class="span8">
<div class="body">
<p>
hey
<br>
<br>
</p>
</div>
</div>
</article>
<article id="2" class="journal-comment journal_comment_box row">
<header class="author span2">
<div class="author-image">
<img class="profile-image" alt="A Pougher" src="http://placehold.it/100x120">
</div>
<h5 class="user">A Pougher</h5>
<h6 class="time"> Today at 2:26 pm </h6>
</header>
<div class="span8">
<div class="body">
<p>
hey
<br>
<br>
</p>
</div>
</div>
</article>
<article id="3" class="journal-comment journal_comment_box row">
<header class="author span2">
<div class="author-image">
<img class="profile-image" alt="A Pougher" src="http://placehold.it/100x120">
</div>
<h5 class="user">A Pougher</h5>
<h6 class="time"> Today at 1:06 pm </h6>
</header>
<div class="span8">
<div class="body">
<p>
hey
<br>
<br>
</p>
</div>
</div>
</article>
<article id="461" class="journal-comment journal_comment_box row">
<header class="author span2">
<div class="author-image">
<img class="profile-image" alt="A Pougher" src="http://placehold.it/100x120">
</div>
<h5 class="user">A Pougher</h5>
<h6 class="time"> Today at 12:36 pm </h6>
</header>
<div class="span8">
<div...
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.modal{
width:300px;
right:10px;
}
JavaScript
$(function() {
$("#commentsBox").on("shown", function() {
var contentH = $("#modalBody").height()*2;
alert(contentH)
// $(".modal-body").animate({ scrollTop: contentH }, 'slow');
$(".modal-body").animate({ scrollTop: $('#message-70-wysihtml5-toolbar').offset().top }, 'slow');
});
});
$(document).on("click", ".sendit", function (e) {
alert('sending')
});