Initialize bootstrap modal in javascript - javascript

I am really new to javascript so please be gentle. I am trying to use bootstrap front end library to automatically open a pop up page with instructions on how to use my site. I can make the modal show on page load but that's all it shows. I want to show it over my regular page and then users can then dismiss it after they read the instructions. I don't know how to make it happen. I am not using regular HTML pages on my site. I am using Omeka CMS. What I understand I need to do is the following but I don't know how to actually do it. I need to:
put the markup for the modal in a custom show.php file
put the code to initialize the modal in script.js file (does it have to be script.js? I'm already using script.js for something else)
Right now I have all the code in show.php which shows the modal but not over my actual page and once you dismiss the dialog nothing happens. So somehow I need alter the show.php and create script.js file to make it work as intended. I don't know what code to put in script.js and I don't know how/where to call the script.js file.
This is the php that shows my modal but not in the way I want to use it
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#myModal').modal('show');
});
</script>
</head>
<body>
<!-- Modal -->
<div id="myModal" class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
I would appreciate any help anyone can provide. Thank you

Related

How Does Initalizing a Javascript Modal Work in Materializecss?

I see other answers, but I still do not understand what initializing javascript means and how I am supposed to add the javascript part to my HTML page? If I want to include this modal in my HTML page:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
I am told I need to initialize it first using this code:
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
If I add this (the javascript portion) to the end of the material.js, it has no effect. If I add it in the HTML page and wrap it around using like this:
<script>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
You can use regular JavaScript to initialize it instead of the jQuery that you're using:
M.Modal.init(document.getElementById('modal1'));
You can put that code in a <script> tag or include a .js file, but make sure you do so below the modal <div> and the Materialize sources.
The full code could look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Modal test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
<script>
M.Modal.init(document.getElementById('modal1'));
</script>
</html>

Twitter Bootstrap - Position a large Popover to cover center of the screen

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>

My Browser Console is Error Free But Its is stops the jquery version to load bootstrap model pop up

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>

Bootstrap 3 Example Code for Modal Window Not working

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.

Bootstrap modal stopped working in Chrome / Firefox but ok in IE8

I have just recently noticed my bootstrap modals have stopped working when I hadn't changed anything. I've searched here and Google and no one has the same issue exactly. To prove my point I copied the Bootstrap demo code into a file and it proves not to work in Chrome or Firefox but does in IE8. I'm writing in asp.net 4, .aspx files using Microsoft VWD2010express.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<link href="Styles/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<form id="form1" runat="server">
<div id="example">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
body here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</form>
</body>
</html>
the above code is from here -> http://getbootstrap.com/javascript/#modals
under Modal
versions of browser are IE8:8.0.7601. Chrome: 31.0.1650.57 m. Firefox: 23.0.1

Categories