How Does Initalizing a Javascript Modal Work in Materializecss? - javascript

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>

Related

Bootstrap 5 - Modal Open on Page Load

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>

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.

Initialize bootstrap modal in 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

Bootstrap Modal won't display

I am having trouble getting a modal to display. I am using bootstrap 3.0.3. When I click the button, the screen goes grey but doesn't popup the modal. The css and js files are in the same directory as the html file. I know this code works because I copy and pasted it from http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=activate-modals-via-javascript. So this makes me think that something is wrong with the way I declared my css and js files in the head. Any help would be much appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap Modals</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#myModal").modal('show');
});
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</body>
</html>
You use class .hide at that have styles:
.hide{
display: none!
}
These rule always hide block
Better solution would be
1. Add special class for this:
.hide-block{
display: none;
}
<div id="myModal" class="modal hide-block fade">
2.The second way is to use inline styles
<div id="myModal" class="modal fade" style="display: none">
but this is not so good as the first solution

How to propagate the text field to the modal dialogue?

I'm trying to 'add a link' functionality to my site. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill: link, title, tags. However, I want the link field to be pre-filled with the value from the previous step. It's similar to what happens when you 'save a link' on delicious.com.
However, the problem is that when I insert a javascript inside the modal dialog, the modal dialog stops working. Any ideas how to get around this problem? Thank you very much!
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-body">
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>
Peter
<script type="text/javascript">
var linkURL = $('#linkURL').val();
//document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>");
document.write(linkURL);
</script>
<button type='submit' class='btn'>Add Link</button>
</form>
</div>
</div>
</div>
<div class="container">
<div class="wall-post">
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="static" class="btn">Add Link</button>
</div>
</div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
</body>
There's a couple of little things preventing your script from working Arman.
The first is you need to load your jquery and bootstrap scripts in the header. The browser interprets the page as it loads, and when the browser hits the bit that says $("#linkURL") it doesn't know what to do with it.
The second bit is you can only know the content that the user has entered into the LinkURL box, when they click the "Add Link" button. Therefore, you can only really populate the modal box after that.
Given this, you can leverage the Events that the model library presents to populate this for you.
If you put this all together, you get this :
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap-modal.js" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript">
$(document).ready(function(){
$('#modal-from-dom').bind('show',function(){
$(".modal-body").html($("#linkURL").val());
});
});
</script>
</head>
<body>
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Add Link</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Add Link
</div>
</div>
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button>
</body>
</html>
Then you just need to modify the content a bit, and you should be right to go!

Categories