How to add JS to a Modal?

Topic: How to add JS to a Modal?

Manuel Remus Stanca asked 6 years ago

I tried to add some JS code taken from w3schools to a modal, so as to show personalized text depending on the day's hours, but it did not work. I used a button triggered modal. Is there any solution for that? (Also to work for a modal that opens automatically when the page is fully loaded). Thx Below the full code

Start your code here

<div class="modal fade" id="basicExampleModal" 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"> <script> function myFunction() { var greeting; var time = new Date().getHours(); if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting; } </script> </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>

Add comment

Piotr Glejzer staff answered 6 years ago

1 0 Best answer

Hi,

You can also do it like w3schools did on their exmaple. Create button at modal-body with onclick = myFunction(); and below that button create element 'p' with id = "demo" , if you click on button it will be show text depending on time.

Here is a my example. I modified a little. If you click on modal, it will be show text depending on time.


<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>Material Design Bootstrap</title>
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- Bootstrap core CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="css/mdb.min.css" rel="stylesheet">
 <!-- Your custom styles (optional) -->
 <link href="css/style.css" rel="stylesheet">
</head>

<body>

 <!-- Button trigger modal -->
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal">
 Launch demo modal
 </button>

 <!-- Modal -->
 <div class="modal fade text-center" id="basicExampleModal" 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">&times;</span>
 </button>
 </div>
 <div class="modal-body" id="demo">

 </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>
 <!-- SCRIPTS -->
 <!-- JQuery -->
 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="js/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="js/mdb.min.js"></script>
 <script>

 var greeting;
 function myFunction() {

 var time = new Date().getHours();
 if (time < 10) {
 greeting = "Good morning";
 } else if (time < 20) {
 greeting = "Good day";
 } else {
 greeting = "Good evening";
 }
 }

 myFunction();
 var createP = document.createElement('p');
 document.getElementById('demo').appendChild(createP);
 createP.innerHTML = greeting;
 console.log(createP);

 </script>
</body>

</html>

Best,
Piotr

Manuel Remus Stanca commented 6 years ago

Hi Piotr, Thx for the code. It works. I will try to implement it for an automatic modal window. Manuel

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

About author

Manuel Remus Stanca

7Support score
2Questions 0Answers

0Snippets likes 0Snippets