I have a boostrap 5.1.3 modal with some content, if the content is biger of 100px for the modal, a scrollbar should appear and go down automatically.
But this does not happen and only works after clicking the scroll down button.
Does anyone know the solution to the problem?
refreshScroll();
const exampleModal = document.getElementById('exampleModal')
if(exampleModal){
exampleModal.addEventListener('show.bs.modal',refreshScroll )
}
var objDiv = document.getElementById("pmbox");
objDiv.scrollTop = objDiv.scrollHeight;
document.querySelector('#pmsend').addEventListener('click', function (e) {
e.preventDefault();
refreshScroll();
});
function refreshScroll(){
var objDiv = document.getElementById("pmbox");
if(objDiv)
objDiv.scrollTop = objDiv.scrollHeight;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="card-body text-dark" id="pmbox" style="position: relative; height: 100px; overflow-y: scroll; verflow-x: hidden;">
<div class="bg-info" style="height: 200px;"> most scroll down auto </div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="pmsend">scroll down</button>
</div>
</div>
</div>
</div>
You can use setTimeout() in order to give an extra time for the modal render to end, and then you can call refreshScroll()
const pmbox = document.getElementById('pmbox')
if (exampleModal) {
exampleModal.addEventListener('show.bs.modal', refreshScroll)
}
var objDiv = document.getElementById('pmbox')
objDiv.scrollTop = objDiv.scrollHeight
document.querySelector('#open').addEventListener('click', function (e) {
e.preventDefault()
setTimeout(() => {
refreshScroll()
}, 200);
})
document.querySelector('#pmsend').addEventListener('click', function (e) {
e.preventDefault()
refreshScroll()
})
function refreshScroll () {
var objDiv = document.getElementById('pmbox')
if (objDiv) objDiv.scrollTop = objDiv.scrollHeight
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Button trigger modal -->
<button type="button" id="open" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="card-body text-dark" id="pmbox" style="position: relative; height: 100px; overflow-y: scroll; verflow-x: hidden;">
<div class="bg-info" style="height: 200px;"> most scroll down auto </div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="pmsend">scroll down</button>
</div>
</div>
</div>
</div>
Related
I'm trying to trigger a link click when the user reaches the bottom of the page yet not successful. when the users reach the bottom, an alert gets successfully fired however trigger to click the signup link doesn't get fired. What am I missing?
var num = 0 ;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height() && num ==0)
{alert("bottom reached!");
num = 1
$('#signupbtn a').trigger('click');
}
});
#bottom{
position: absolute;
top: 1000px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a class="button button-sm button-shadow" id="signupbtn" data-toggle="modal" data-target=".bs-example-modal-new" href="#">Sign Up</a>
<div class="wrap">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<input placeholder="Email" style="width: 258px; height: 48px; margin: 100"><a class="button button-secondary button-shadow" href="#">send me </a>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
<div id="bottom">Bottom</div>
I have also tried this $('#signupbtn').trigger('click'); yet didnt work
To open the modal, use the native code from Bootstrap 3 documentation
$('.modal').modal('show');
var num = 0;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height() && num == 0)
{
alert("bottom reached!");
num = 1
$('.modal').modal('show');
}
});
#bottom {
position: absolute;
top: 1000px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a class="button button-sm button-shadow" id="signupbtn" data-toggle="modal" data-target=".bs-example-modal-new" href="#">Sign Up</a>
<div class="wrap">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<input placeholder="Email" style="width: 258px; height: 48px; margin: 100"><a class="button button-secondary button-shadow" href="#">send me </a>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
<div id="bottom">Bottom</div>
You're using the wrong condition to detect if scroll reached the bottom page. You can use:
$(window).scrollTop() + $(window).height() > $(document).height() - 1 && num == 0 or the following answer. Note that I add -1 since the linked answer wasn't working for me in 1920x1080.
For click trigger #signupbtn would work fine.
var num = 0;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && num == 0)
{
alert("bottom reached!");
num = 1
$('#signupbtn').trigger('click');
}
});
#bottom{
position: absolute;
top: 1000px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a class="button button-sm button-shadow" id="signupbtn" data-toggle="modal" data-target=".bs-example-modal-new" href="#">Sign Up</a>
<div class="wrap">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<input placeholder="Email" style="width: 258px; height: 48px; margin: 100"><a class="button button-secondary button-shadow" href="#">send me </a>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
<div id="bottom">Bottom</div>
Just try
$('#signupbtn').trigger('click');
Or
$('#signupbtn').click();
I want to display modal on button click. I've followed bootstrap documentation, but for some reason the modal isn't popping up.Here is my code:
Modal:
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal"> View Details</button>
Jquery:
$(document).ready(function(){
$('button.btn-view-details').on('click', function () {
$('#commonModal').modal('show');
})
})
On your button, you can add data-target attribute and you don't need to trigger the popup via jQuery:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal" data-target="#commonModal"> View Details</button>
You need to add just bootstrap cdns
$(document).ready(function() {
$('button.btn-view-details').on('click', function() {
$('#commonModal').modal('show');
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details" data-toggle="modal"> View Details</button>
How to when I click to open modal show the modal content. i click to anchor close the modal and srcoll to anchor id.
#Content {
height: 400px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
The Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="Content">
The Content
</div>
Any idea for help me. Thanks!
You need to hide the modal, wait for the animation to complete, and then scroll to the item.
You can optionally animate the scroll with $('html,body').animate({scrollTop: $('#Content').offset().top)});
function onContentClick(e) {
e.preventDefault();
$('#myModal').one('hidden.bs.modal', () =>
window.scrollTo(0, $('#Content').offset().top));
$('#myModal').modal('hide');
}
#Content {
height: 400px;
margin-top: 1000px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
The Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="Content">
The Content
</div>
The modal is defined as:
<div class="moremodal" style="display:none;">
<div class="modal-dialog modal-lg" style="width: 500px; border: outset; position: fixed; top: 25%; left: 35%;">
<div class="modal-content" style="top:0px;"></div>
</div>
Whenever someone clicks outside the modal, I have disabled the clicks so that the person is forced to choose any options from the modal before proceeding. (This does not work properly for some reason.)
$("*:not('.moremodal')").on("click",function(){
return false;
})
But i want to re-enable clicks on the page after the modal is closed. How do I do that? And where should I call that function or write that code?
EDIT:
There is only one modal which I populate.
Here two bootstrap modal.
1) Close when click on outside of modal.
2) Not close when click on outside of modal.
Hope it will help you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Default Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1" data-backdrop="static" data-keyboard="false" >Disabled outside click modal</button>
<!-- Modal -->
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Use bootstrap modal and add this code you can entirely achieve your goal.
Hope this will helps you.
$(document).ready(function() {
$("#popup").modal({
show: false,
backdrop: 'static'
});
$("#click-me").click(function() {
$("#popup").modal("show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="modal" id="popup" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
**Your HTML goes here**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<a id="click-me" class="btn btn-primary">Open</a>
</body>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>
Use CSS property "pointer-event: none;" on modal overlay.
Firstly change your selector into something like this (assign an id to the model for ease of selection):
$('body').click(function(evt){
//all elements except the modal and elements in the modal
if(evt.target.id == "modal_id" || $(evt.target).closest("#modal_id").length > 0) {
//if the modal is visible do nothing
if($("#modal_id").is(":visible")) {
return false;
}
}
});
EDIT
If you are dealing with multiple modals and need to use the class selector:
$('body').click(function(evt){
//all elements except the modal and elements in the modal
if($(evt.target).hasClass("moremodal") || $(evt.target).closest(".moremodal").length > 0) {
//if there is a visible model do nothing
if($(".moremodal").is(":visible")) {
return false;
}
}
});
Simply you can use this
<a data-controls-modal="id" data-backdrop="static" data-keyboard="false" href="#">
<head>
<style>
.modal-container {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.8);
display: inline-block;
position: absolute;
top: 0;
left 0;
z-index: 100;
}
.modal-content {
margin: 10%;
backgrond-color: rgba(0,0,0,1);
display: inline-block;
width: 80%;
height: 80%;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div> my normal content </div>
<div>
<button type="button" id="open-modal">open the modal</button>
</div>
<div class="modal-container hidden">
<div class="modal-content">
Here is your modal content
<div>
<button type="button" id="close-modal">close</button>
</div>
<div>
</div>
<script src="path/to/jquery/libraries/jquery.min.js"></script>
<script>
$(document).ready(() => {
$('.modal-container').on('click', function(event){
// stop bubbling on clicks
event.preventDefault();
event.stopPropagination();
});
$('#open-modal').on('click', function(){
// show the modal
$('.modal-container').removeClass('hidden');
// disable body scrolling in the background
$('body').css('overflow-x', 'hidden').css('overflow-y', 'hidden');
})
$('#close-modal').on('click', function(event){
$('.modal-container').addClass('hidden');
$('body').css('overflow-x', 'auto').css('overflow-y', 'auto');
}
});
</script>
</body>
i think this logical code shows you how it can work. i've not tested it so i think the css part is not 100% correct.
I am trying to achieve the following:
I have a button :
<button id= "<dynamicid>" type="button" class="btn btn-danger btn-sm pull-right" data-toggle="modal" data-target="#mymodal">Open</button>
The id attribute changes everytime. Now clicking this button opens up a modal. What I am trying to achieve is get this dynamic id into the modal which opens up.
Here is the full modal:
<div class="modal fade" id="mymodal" data-placement="right" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding: 4%; background-color: white; color: #6A6A6A; font-family: 'Crete Round', serif;">
<input type="submit" class="btn btn-primary btn-sm" value="submit"/>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Any suggestions on this would be of great help.
As you didn't got really specific on what you want to do with the ID here an example on how it could be done:
$('#mymodal').on('show.bs.modal', function(e) {
$(this).find('.modal-body').text(e.relatedTarget.id);
});
Example
Reference:
bootstrap - modal events
$('#mymodal').on('show.bs.modal', function(e) {
var id = $(this).find('.modal-body').text(e.relatedTarget.id);
if(id) console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button id="whateverID" type="button" class="btn btn-danger btn-sm pull-right" data-toggle="modal" data-target="#mymodal">Open</button>
<div class="modal fade" id="mymodal" data-placement="right" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding: 4%; background-color: white; color: #6A6A6A; font-family: 'Crete Round', serif;">
Header
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>