How to display information from input fields in a bootstrap modal? - javascript

So once the user has filled out their information and clicks submit I want to display the information in a bootstrap model with a confirmation button underneath.
This would be a summary of their information before it submitted to the database. So far here's what I've got:
const text = document.getElementsByClassName("myText").innerHTML;
const modalBody = document.getElementById("bodyModal")
function submitText () {
modalBody.innerHTML = text
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<label>Name</label>
<input type="text" class="myText">
<br>
<label>Age</label>
<input type="text" class="myText">
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onClick="submitText">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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" id="bodyModal">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>

function submitText(){
var html="Your name is "+$("#name").val()+"<br>Your age is "+$("#age").val();
$("#bodyModal").html(html);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<label>Name</label>
<input type="text" class="myText" id="name"> <!-- i only added name id to this element -->
<br>
<label>Age</label>
<input type="text" class="myText" id="age"> <!-- i only added age id to this element -->
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onClick="submitText()"> <!-- here was an syntax error. you were calling method by uts name without () sign -->
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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" id="bodyModal">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>

const modalText = $("#modalText")
function submitText () {
var name = $("#myName").val();
var age = $("#myAge").val();
modalText.text("Hello " + name + " with " + age + " years old ");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<label>Name</label>
<input type="text" id="myName" class="myText">
<br />
<label>Age</label>
<input type="text" id="myAge" class="myText">
<br />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onClick="submitText()">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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" id="bodyModal">
<lable id="modalText"></lable>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>

You need to get the value of the input fields. I suggest giving the inputs two ids like this:
<label for="id1">Name</label>
<input type="text" class="myText" id="id1">
<label for="id2">Age</label>
<input type="text" class="myText" id=id2">
and then get their value with:
var name = document.getElementById("id1").value
var age = document.getElementById("id2").value
Finally, you can append the text you just got on the modal by doing so:
$("#bodyModal").html("<p>"+name+"</p><p>"+age+"</p>")

Related

How to display modal after a delay?

I want that if a user stays on my website for around 20 seconds, a modal asking for user's name and email address will be displayed. I have fetched id of the modal div and stored it in the function myFunction(). The main problem here is nothing gets displayed after 20 seconds.
Following is my code:-
<!-- Apart from window.onload, I have also mentioned the function with body onload-->
<body onload="myFunction" id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<script type="text/javascript">
window.setTimeout(function myFunction() {
document.getElementById("exampleModal");
},20000);
</script>
<!-- Modal code -->
<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">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="MessageServlet" method="post">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name" value="svchaturvedi9#gmail.com" readonly="readonly">
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Your Email ID:</label>
<input type="text" class="form-control" id="email-name" name="email-name" placeholder="Email ID">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text" name="message-text"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send message</button>
</form>
</div>
</div>
</div>
</div>
My aim here is, when a user enters a value within the modal fields and clicks OK, user's data will be sent to the email servlet.
Thank you
You can see below example. Replace second and modal code as per your need.
setTimeout(function() {
$('#myModal').modal('toggle');
}, 200);
<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>
<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>

bootstrap modal form not submitted the user In rails 5

I have form inside modal and want to create a user. when I click on submit nothing happens.
How can I submit the modal form and save the content of the modal in other page in rails application with Ajax?
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<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">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="text" class="col-form-label">firstname:</label>
<input class="form-control" id="text2"></input>
</div>
<label for="text" class="col-form-label">lastname:</label>
<input class="form-control" id="text2"></input>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">submit</button>
</div>
</div>
By clicking submit button the text field value will be passed to the controller via Ajax method
$(document).ready(function(){
$("#submit").click(function(){
alert($("#name").val());
});
$.ajax({
type: 'POST',
url: 'path/to/controller',
data: {'value' : $("#name").val() }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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">
<p>Some text in the modal.</p>
<input type="text" name="name" id="name"></input>
<input type="submit" id="submit"></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

focus() does not work at all

I try to focus() an input in a Bootstrap modal, but nothing seems to work. I have tried the setTimeout and the tabindex fixes, but nothing.
Even when I run it in the console:
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
it doesn't focus. I am using Firefox 53.0, 64 bit on Fedora.
This is the modal:
<div id="mdlAddProperty" 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">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Update it works one time in Chrome, zero times in Firefox.
If you need to focus it in just the beginnig you can add autofocus event on the html element you want to focus in.
<div id="mdlAddProperty" 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">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1" autofocus></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But if you want to do it with jQuery you need to surround your code with $(document).ready(function());
$(document).ready(function() {
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
});
Here is the Bootstrap Modal events you can use:
Read more here: https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
Also if you are running js at console you need use this(open modal first):
jQuery("#inpProperty").focus();
$(document).ready(function() {
$("#myBtn").click(function() {
$("#mdlAddProperty").modal("show");
});
$("#mdlAddProperty").on('shown.bs.modal', function() {
$("#inpProperty").focus();
});
});
<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"/>
<div class="container">
<h2>Modal Events - shown.bs.modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<!-- Modal -->
<div id="mdlAddProperty" 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">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p>
<input class="input" id="inpProperty" tabindex="1">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Push a Javascript ID into a bootstrap modal (when existing feature in place...)

How do I pass a value into a Bootstrap Modal? I have some basic HTML that looks like this:
<h2 class="name" itemprop="name">Name ABC</h2>
What I would like to see happen is for the 'NAME ABC' to be pushed or 'echoed' within a bootstrap modal..
I am assuming you use an 'id' but I' must not sure how to code that....
The HTML in the bootstrap would need
<input type="text" name=" ID " value=""/> * I think!! *
If anyone can jump in with the basic JavaScript to make this work I'd be very grateful! Thanks!
$("#submit").click(function(){
$("#modalInput").val($("#input").val());
$("#modal_id").modal('show');
});
<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>
Type a message : <input type="text" id="input">
<button id="submit">Send</button>
<div class="modal fade" id="modal_id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Message!</h4>
</div>
<div class="modal-body">
Your Value : <input type="text" id="modalInput" readonly/>
</div>
</div>
</div>
</div>
To achieve this you can instantiate a Bootstrap modal as normal, then simply add a click handler to the h2 element which places its text() value within the target input in the modal. Try this:
$('.name').click(function() {
$('#foo').val($(this).text())
});
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2 class="name" itemprop="name" data-toggle="modal" data-target="#exampleModal">Name ABC</h2>
<h2 class="name" itemprop="name" data-toggle="modal" data-target="#exampleModal">Name XYZ</h2>
<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">
<input type="text" id="foo" name="ID" value="" />
</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>
you can try following
$('input[name="ID"]').val($('h2.name').text());
$('input[name="ID"]').val($('h2.name').text());
<!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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="name" itemprop="name">Name ABC</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">
<input type="text" name="ID" value="" /> * I think!! *
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think what you are trying to achieve is getting value of text with class .name and setting it in as an id attribute, which is in modal box of bootstrap. If so following process will help.
html
<h2 class="name" itemprop="name">Name ABC</h2>
sdsdf
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p id="" class="myValue">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>
</div>
</div>
jquery
$(function() {
var myTxt = $('.name').text();
$('.myValue').attr('id', myTxt);
})
What I have done is taken text from div with class name "name" and but that in as a id attribute in modal div with class "myValue". Hope this helps

Bootstrap's Javascript Varying modal content based on trigger button

I am using this Javascript
Varying modal content based on trigger button
<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">
<div class="modal-dialog" role="document">
<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>
$('#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);
});
If I click on Send Message, nothing happens.
How do I enable Submit?
Change line of button for
<button id="buttonSend" type="button" class="btn btn-primary">Send message</button>
Change tag form Line
<form id="frm">
Define event for button
$(document).on("click", "#buttonSend", function (event) {
// Your ID Form
$("#frm").submit();
});
Just try to put your <form> after the <div class="modal-content"> having all the form elements, including buttons, inside it like this:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<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">
<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>
</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>
</form>
</div>
</div>
</div>
Working in Chrome Version 95.0.4638.54 (Official Build) (64-bit).
Using Bootstrap's default starter html template and Bootstrap varying modal data example. Functions as intended as of 11/3/2021.
All dependencies for Jquery, Popper, and Bootstrap JS are retrieved through jsdelivr.
Sources:
Bootstrap 4 Modal Documentation
https://getbootstrap.com/docs/4.0/components/modal/
Bootstrap 4 Starter HTML Template
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Tip for bootstrap developers: Ensure you look at the link to bootstrap documentation to see which version you are reviewing before adopting code changes.
(docs/4.0 vs docs/5.0, etc.)
Source Code Full:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 4.2.1 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</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>
<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">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<!--JQuery 3.6.0-->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap 4.2.1 Bundle with Popper 2.9.2 -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script>
$(function(){
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});
});
</script>
</body>
</html>

Categories

Resources