HTML Bootstrap question:
I want to use 6 bootstrap modal windows(different content) on the same Web page. However, although I change the modal body, I can just see the first modal body. I want to get other content. What should I change in my code, I will put my code below. I must use the Bootstrap version 4.3.1.
Homework Answers
Qo.
ANS:
HTML/JQ/Bootstrap Code:
<html>
<head>
<title>Open 6 Boostrap
Modals</title>
<!-- Using Boostrap 4.3.1
--->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
</style>
<script>
$(document).ready(function(){
$('#cart-btn').click(function(){
var modals=$('.modal');
for(i=1; i<modals.length;
i++)
{
$('#cart-btn').attr("data-target","#exampleModal"+i);
//$('#exampleModal'+i).on('shown.bs.modal',function(){$('#myInput').trigger('focus');});
}
});
});
</script>
</head>
<body>
<a
name="button"></a>
<div class="modal fade"
id="exampleModal" tabindex="-1" role="dialog"
area-labelledby="exampleModalLabel" area-hidden="true">
<div
class="modal-dialog" role="document">
<div class="modal-content">
<div
class="modal-header">
<h5
class="modal-title"
id="exampleModalLabel">Cart1</h5>
<button
type="button" class="close" data-dismiss="modal"
area-label="close">
<span
area-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
Kid's
Shirt was added to cart.
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade"
id="exampleModal1" tabindex="-1" role="dialog"
area-labelledby="exampleModalLabel" area-hidden="true">
<div
class="modal-dialog" role="document">
<div class="modal-content">
<div
class="modal-header">
<h5
class="modal-title"
id="exampleModalLabel">Cart2</h5>
<button
type="button" class="close" data-dismiss="modal"
area-label="close">
<span
area-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
Kid's
Shirt was added to cart.
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade"
id="exampleModal2" tabindex="-1" role="dialog"
area-labelledby="exampleModalLabel" area-hidden="true">
<div
class="modal-dialog" role="document">
<div class="modal-content">
<div
class="modal-header">
<h5
class="modal-title"
id="exampleModalLabel">Cart3</h5>
<button
type="button" class="close" data-dismiss="modal"
area-label="close">
<span
area-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
Kid's
Shirt was added to cart.
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade"
id="exampleModal3" tabindex="-1" role="dialog"
area-labelledby="exampleModalLabel" area-hidden="true">
<div
class="modal-dialog" role="document">
<div class="modal-content">
<div
class="modal-header">
<h5
class="modal-title"
id="exampleModalLabel">Cart4</h5>
<button
type="button" class="close" data-dismiss="modal"
area-label="close">
<span
area-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
Kid's
Shirt was added to cart.
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade"
id="exampleModal4" tabindex="-1" role="dialog"
area-labelledby="exampleModalLabel" area-hidden="true">
<div
class="modal-dialog" role="document">
<div class="modal-content">
<div
class="modal-header">
<h5
class="modal-title"
id="exampleModalLabel">Cart5</h5>
<button
type="button" class="close" data-dismiss="modal"
area-label="close">
<span
area-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
Kid's
Shirt was added to cart.
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade"
id="exampleModal5" tabindex="-1" role="dialog"
area-labelledby="exampleModalLabel" area-hidden="true">
<div
class="modal-dialog" role="document">
<div class="modal-content">
<div
class="modal-header">
<h5
class="modal-title"
id="exampleModalLabel">Cart6</h5>
<button
type="button" class="close" data-dismiss="modal"
area-label="close">
<span
area-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
Kid's
Shirt was added to cart.
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div
class="button-container">
<button
type="button" id="cart-btn" class="btn btn-primary"
data-toggle="modal">Cart</button>
</div>
</body>
</html>
Ouput Image:
--------------------------------------------------------------------------------------------------------------------------------------------------
THANKS!!
Add Answer to:
HTML Bootstrap question:
I want to use 6 bootstrap modal windows(different content) on
the same Web...
I created an Html with tabs, then how do I import the constant character content of...
I created an Html with tabs, then how do I import the constant character content of a JS into one of these tabs without editing that JS file? here is my page： <!DOCTYPE html> <html> <body> <div id="main"> <span class="tab"> <button class="current">News</button> <button>Create</button> <button onclick="about()">About</button> <button>Login</button> </span> <div class="con" style="display: block"> For news content</div> <div class="con">For create content</div> <div class="con" id="about">For about content</div> </div> </body> <script type="text/javascript" src='strings.js'></script> <script> var box = document.getElementById('main'); var btns = document.getElementsByTagName('button'); var divs =...
HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...
HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids and have
come across a snag. I need this:
To look more like this....
It does not really need to be perfect as far as scaling, at this
point I just want the yellow box in the corner with borders like
the pic. Also the original pic has white borders that we are
ignoring.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags...
Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...
Hello, I was wondering if you could possibly think of ways to
improve my home page then I would like you to do so. I know it
could be better. Thank you.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar...
Please edit and add all the code needed to make the images side by side and to put the buttons in...
Please edit and add all the code needed to make the images side
by side and to put the buttons in the middle of the images. Thank
you
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light
bg-light"> <a class="navbar-brand" href="#">Lakeside
Resort Spot</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false"
aria-label="Toggle navigation">...
How do i make my html show 10 results per page, and how do i make...
How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...
I'm having trouble to link the .js file to the html so changes for the html...
I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style> .hidden {display: none;} .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...
Hello Ive been tryting to add the CDN of jquery to my html code and I...
Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...
given below are the project description and their Html and css files i need javascript according...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
I need HELP to get the code to do these function: If I keep clicking "Generate"...
I need HELP to get the code to do these
function: If I keep clicking "Generate" multiple times, the list
keeps on getting bigger. The number of rows should always be equal
to the number of columns. Also make the code to show both table at
the same time?
Here is the code I got some far :
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<title>Testing</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<style>
td...
NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...
NEED HELP with HTML with Javascript embedding
for form validation project below. I have my code
below but I'm stuck with validation. If anyone can fix it, I'd
really appreciate.
******************************************************************************
CODE:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Nice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
var textFromTextArea;
function getWords(){
var text =...
HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids and have
come across a snag. I need this:
To look more like this....
It does not really need to be perfect as far as scaling, at this
point I just want the yellow box in the corner with borders like
the pic. Also the original pic has white borders that we are
ignoring.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags...
Hello, I was wondering if you could possibly think of ways to
improve my home page then I would like you to do so. I know it
could be better. Thank you.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar...
Please edit and add all the code needed to make the images side
by side and to put the buttons in the middle of the images. Thank
you
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light
bg-light"> <a class="navbar-brand" href="#">Lakeside
Resort Spot</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false"
aria-label="Toggle navigation">...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
I need HELP to get the code to do these
function: If I keep clicking "Generate" multiple times, the list
keeps on getting bigger. The number of rows should always be equal
to the number of columns. Also make the code to show both table at
the same time?
Here is the code I got some far :
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<title>Testing</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<style>
td...
NEED HELP with HTML with Javascript embedding
for form validation project below. I have my code
below but I'm stuck with validation. If anyone can fix it, I'd
really appreciate.
******************************************************************************
CODE:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Nice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
var textFromTextArea;
function getWords(){
var text =...
Most questions answered within 3 hours.
-
Where is the error in this code sequence?
String s1 = "Hello";
String s2 = "ello";...
asked 10 months ago -
Financial data for Joel de Paris, Inc., for last year
follow:
Joel de Paris, Inc.
Balance...
asked 10 months ago -
Consider this reaction:
Al2(SO4)3 (aq)+ BaCl3
(aq) Al2Cl6 (aq)- +
3BaSO4(s) . What is the...
asked 10 months ago -
Suppose that Savneet is considering increasing her
recent random sample from 20 car rentals to 40...
asked 10 months ago -
Trucks arrive at an unloading terminal at an average rate of 120
per hour.
Trucks arrive...
asked 10 months ago -
Why are methanol and ethanol completely soluble in water while
octanol is not very little soluble....
asked 10 months ago -
A facilities manager at a university reads in a research report
that the mean amount of...
asked 10 months ago -
When the CuSO4 is rehydrated by adding water to the anhydrous
compound, is this an endothermic...
asked 10 months ago -
A ray of sunlight is passing from diamond into crown glass; the
angle of incidence is...
asked 10 months ago -
A block of mass 0.249 kg is placed on top of a light, vertical
spring of...
asked 10 months ago -
how do the kidneys compensate in the presences of acidosis
a) trigger hyperventilate
b) reserve acid...
asked 10 months ago -
Question 501 pts
The rental rate of capital to the firm increases. Which of the
following...
asked 10 months ago