Let's say I have a Bootstrap Popover on my site like so:
HTML:
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top"
data-content="Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here.">
</button>
SCRIPTS:
$(function () {
$('[data-toggle="popover"]').popover()
})
However, because the content of the Popover is going to be quite long, is there a way to center the popover on the screen and re-size to take up 75% the total area of the screen? Perhaps a Popover is not the correct tool for the job, in which case I'd appreciate guidance on better components to use.
I think the best component for this is a Bootstrap Modal
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Modal example</title>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
I am trying to implement a modal that opens automatically when the page is loaded for a school assignment. I am using Bootstrap 5 and all the examples I have found online use older versions. The modal can be found under the comment Vertically Centered Cookies Modal. I have used a Bootstrap CDN as well as the Popper Bundle from https://getbootstrap.com/. This is my code:
<!DOCTYPE HTML>
<html lang="en-AU">
<head>
<!-- Require Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CDN - Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Title -->
<title>Title Here</title>
<!-- Webpage Icon -->
<link rel="shortcut icon" href="Images\Pilot640_Logo_Symbol.ico"/>
</head>
<body>
<!-- Nav Bar -->
<nav class="navbar navbar-expand-sm bg-secondary navbar-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="Images\Pilot640_Logo_Symbol.ico" alt="Logo" style="width:100px;" class="rounded-pill">
</a>
</div>
</nav>
<!-- Header Section -->
<header>
</header>
<!-- Vertically Centered Cookies Modal -->
<div class="modal-dialog modal-dialog-centered" id="onload">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Do You Want Cookie? We Want Yours! 🍪</h5>
</div>
<div class="modal-body">
This site uses cookies to personalies the content for you.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!--Modal JS Script -->
<script type="text/javascript">
$(window).load(function(){
$('#onload').modal('show');
});
</script>
</body>
</html>
If anyone knows what the problem is or how to make one, the help would be greatly appreciated.
First of all welcome to Stackoverflow community.
As you have asked, you have correct the modal dialog code snippet first. You have missed the first line of modal in there. you have to add the id to that line, not to the modal-dialog div
<div class="modal fade" id="onload" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <!-- Add this line to your code -->
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Do You Want Cookie? We Want Yours! 🍪</h5>
</div>
<div class="modal-body">
This site uses cookies to personalies the content for you.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- And the relavant closing div tag -->
Then after that you need to import jquery to your code. Otherwise code jquery code segments will not work in your html file. Finally rather than using jquery onload event listner use the native VanillaJS window.onload event to trigger your modal.
<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!--Modal JS Script -->
<script type="text/javascript">
window.onload = () => {
$('#onload').modal('show');
}
</script>
Then your bootstrap modal will work with expected behavior.
Vanilla JS Solution
The HTML would remain the same, but you wouldn't need to load jQuery
<script type="text/javascript">
window.onload = () => {
const myModal = new bootstrap.Modal('#onload');
myModal.show();
}
</script>
I have added a pop up on Click of Change Password Tab and appointments ,
Please help me what is the problem in my js file custome.js , since i have tried this in js validator for syntax checking it is absolutely fine , no error in console.
All Custom Js is Working Fine. But Bootstrap Model is not Working Once I remove my custome.js file the bootstrap model perfeclty works.
https://mobulous.app/clinicnew/
I have noticed in your header you are using bootstrap 3 I would suggest moving to the latest version
Use the CDNS which can be found here or as posted below.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Also, add your custom JS into the head with all the other scripts.
Here is the bootstrap documentation on modals. Going over this will help you understand how to use the modals better.
However if for any reason you need to use bootstrap 3 try this example -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="assets/js/custome.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>
</body>
</html>
All-right, I've been looking around a few sites and this is the closest to what I want, kinda.
I want a button to make a div show up, (I can do this via a spoiler code I have),
Then I want the same button to dim the screen like in the link above, now what I -Can't- do. is make this a toggle button. i might be missing something basic but I don't know.
here below I have html with a button that will show up a div with "hello" in it, I want it so when "hello" pops up it will dim the screen, but pressing the button again (Or) clicking out of the div, will return the screen to normal again.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onclick="if(document.getElementById('spoiler-') .style.display=='none') {document.getElementById('spoiler-') .style.display=''}else{document.getElementById('spoiler-') .style.display='none'}">Spoiler</button>
<div id="spoiler-" style="display:none">
<p style="border: 2px solid gray;">Hello!</p>
</div>
</body>
</html>
Thank you for taking time to read this. hope to figure this out soon >_<
Before I begin I would like to remind you not to use inline JS or CSS, it's bad practice, not very easy to read and you should always separate your HTML, CSS & JS.
Now on to your question, instead of reinventing the wheel you might want to take a look at this really neat framework called BootStrap.
Add these links and scripts in your head file:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<!-- We need jQuery to make bootstrap.min.js work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Here is a working example of a BootStrap modal:
$("#myModal").on("show.bs.modal", function(event) {
console.log("Modal has been shown, do something amazing now!");
});
.modal-backdrop {
background-color: #333;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<!-- We need jQuery to make bootstrap.min.js work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal" id="modalOne">Button</button>
<!-- Modal -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem.
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">OK</button>
</div>
</div>
</div>
</div>
You can also change the background colour, by changing the background-color property underneath the .modal-backdrop class in your CSS.
If you need extra help with BootStrap, you can head here to get started with BootStrap.
Good luck and all the best.
This question already has answers here:
How to open a Bootstrap modal window using jQuery?
(15 answers)
Closed 6 years ago.
I am trying to figure out a Modal Box Dynamically using jQuery without a form.
Open Modal
<div id="openModal" class="modalDialog">
<div> X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
Try the below code it will help you
$('#openModal').modal('hide');
$('#openModal').modal().hide();
$('#openModal').removeClass('show');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>
</body>
</html>
This question is so simple as to be embarrassing. As a test of something I copied the code from http://getbootstrap.com/javascript/#modals directly into a page that only carries a basic page setup, and yet it doesn't work. Which means I'm doing something extremely stupid. Here's my entire page:
<!DOCTYPE html>
<html>
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="includes/css/bootstrap.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fat">Open modal for #fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="includes/js/bootstrap.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
<script type="text/javascript">
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
</body>
</html>
Yet when I hit the button, the modal is launched but instead of "New Message to #mdo" like you get on their website, I get "New Message to undefined". What am I missing?
first of all it's not embarrassing, we were are there. second of all your code looks good to me. the only thing that got me is this line :
<script src="includes/js/bootstrap.js"></script>
does this directory exist? because if you copy this from website it may be referring to files stored in server. try to include bootstrap.js yourself. same thing for the css file
var recipient = button.data('whatever')
button.data('whatever') is undefined
Oh holy cow. The problem was (obviously) never with the code. It is with the version of either JQuery or Bootstrap that I have loaded. When I replaced my local copies with links to the source, the problem went away. I'm glad I found this problem, or it would pervade my entire site as I developed it. Thanks everyone for the help. I guess you have to learn the dumb stuff before you become expert.