I want to arrange a html page using bootstrap functionality, but a div is at the top of the page and the other divs are at the bottom when I put them in a container. What is the proper way to arrange a page using bootstrap ?
This is my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Settings</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<div class="icon-bar" style="float: left">
<div class="employee"><i class="fa fa-home"></i></div>
<div class="employee"><i class="fa fa-info"></i><!--Summary--></div>
<div class="employee"><i class="fa fa-globe"></i><!--Plan details--></div>
<div class="employee"><i class="fa fa-building-o"></i><!--Company holidays--></div>
<div class="employee"><i class="fa fa-calendar-check-o"></i><!--Team calendar-->
</div>
<div id="manager"><a href="pendingRequests.html"><i class="fa fa-clock-o"><span
class="badge badge-notify hidden"></span></i></a><!--Pending requests--></div>
<div id="hr"><i class="fa fa-cog"></i><!--Settings button--></div>
<div class="employee"><i class="fa fa-power-off"></i></div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
Create user
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button id="addLocation" class="btn-success btn">Create location</button>
</div>
</div>
<div>
<div class="col-xs-12">
<button id="addRole" class="btn-success btn">Create role</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button id="addDepartment" class="btn-success btn">Create department</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button id="addOfficialHoliday" class="btn-success btn">Add official Holiday</button>
</div>
</div>
<div class="row">
<h4 id="successMessage"></h4>
</div>
</div>
<div id="locationModal" class="modal fade" tabindex="-1" role="dialog">
<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">Location name</h4>
</div>
<div class="modal-body">
<form id="locationForm">
<input type="text" required='' id="locationName" name="name"/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="locationBtn" value="Add new location"/>
<div id="alert" style='float: left; color: red'></div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
<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">Role name</h4>
</div>
<div class="modal-body">
<form id="roleForm">
<input type="text" required='' id="roleName" name="name"/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="roleBtn" value="Add new role"/>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="departmentModal" class="modal fade" tabindex="-1" role="dialog">
<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">Department name</h4>
</div>
<div class="modal-body">
<form id="departmentForm">
<input type="text" required='' id="departmentName" name="name"/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="departmentBtn" value="Add new department"/>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--Include jQuery-->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.serializeObject.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
<script type="text/javascript" src="js/notify.js"></script>
</body>
</html>
And this is how it is arranged:
because you've put them all in a separate row. what you need to do is, put them in the same row and also, your col-xs-12 doesn't really do anything here to make it in a row. so you need to specify in your html that you want the buttons to be inline on larger screens like desktops.
if you want your buttons in a row on desktop, you need to put them in rows that'd fit.
let's say you have 6 buttons. then you can use col-md-2 as 12/6 = 2. or depending upon the length of these links/buttons you can change x in col-md-x.
here. this plunk will show what i mean. you might have to enlarge the preview panel.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-2">
Create user
</div>
<div class="col-xs-12 col-md-2">
<button id="addLocation" class="btn-success btn">Create location</button>
</div>
<div class="col-xs-12 col-md-2">
<button id="addRole" class="btn-success btn">Create role</button>
</div>
<div class="col-xs-12 col-md-2">
<button id="addDepartment" class="btn-success btn">Create department</button>
</div>
<div class="col-xs-12 col-md-2">
<button id="addOfficialHoliday" class="btn-success btn">Add official Holiday</button>
</div>
</div>
<div class="row">
<h4 id="successMessage"></h4>
</div>
</div>
Related
I want to have an input text with 2 buttons beside of it in the modal footer, those 2 buttons must have the same height with the input text, how to show it properly?
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="row justify-content-lg-between">
<div class="col-md-8">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="col-md-2 text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-2 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Add tag wrap 2 button and set d-flex justify-content-center:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="d-flex flex-row justify-content-lg-between">
<div class="col-md-8 mx-5">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="d-flex justify-content-lg-center">
<div class="text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-1 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My modal is not working. Actually I want a modal for sign up and send it to my code behind page. I have used bootstrap lumen and jquery. Please help me, any help would be beneficial. Thanks in advance.
Also I need to make a form and generate ajax call for that.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="HotelReservation.Views.Login" %>
<!DOCTYPE html>
<link href="../css/bootstrap.css" rel="stylesheet" />
<script src="../js/bootstrap.js"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<script src="../js/bootstrap.min.js"></script>
<link href="../css/custom1.css" rel="stylesheet" />
<script src="../js/jquery-3.3.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="form_bg">
<form>
<h2 class="text-center">Login Page</h2>
<br />
<div class="form-group">
<input type="email" class="form-control" id="userid" placeholder="User id">
</div>
<div class="form-group">
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<br />
<div class="align-center">
<button type="submit" class="btn btn-default" id="login">Login</button>
</div>
<br />
<button class="btn btn-success" data-toggle="modal" data-target="#mymodal">Launch Modal </button>
<div class="modal">
<div class="modal-dialog" role="document" id="mymodal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="HotelReservation.Views.Login" %>
<!DOCTYPE html>
<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>
<link href="../css/custom1.css" rel="stylesheet" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="form_bg">
<form>
<h2 class="text-center">Login Page</h2>
<br />
<div class="form-group">
<input
type="email"
class="form-control"
id="userid"
placeholder="User id"
/>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
id="pwd"
placeholder="Password"
/>
</div>
<br />
<div class="align-center">
<button type="submit" class="btn btn-default" id="login">
Login
</button>
</div>
<br />
<div
class="btn btn-success"
data-toggle="modal"
data-target="#mymodal"
>
Launch Modal
</div>
<div class="modal">
<div class="modal-dialog" role="document" id="mymodal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">
Save changes
</button>
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".btn-success").click(function() {
console.log("hit");
$(".modal").modal("show");
});
});
</script>
</body>
</html>
add this script in head section
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
</script>
Now add this code in body
<button type="button" class="btn btn-info btn-lg" id="btnShowPopup" style="display:none" data-toggle="modal" data-target="#myModal">Open Modal</button>
<asp:Button ID="Button1" runat="server" CssClass="btn btn-success" style="padding:5px;font-size:14px;" OnClick="Button1_Click" Text="View Contact" />
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="color:#00ca4c;">Lead Details</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
</div>
</div>
<div class="modal-footer" style="padding-right:15px;">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and add this in your code behind
protected void Button1_Click(object sender, CommandEventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
}
in the button click event on which you want to open modal
I created a simple modal, but when I click the button the modal appears at the very top of the page and there is no fade in animation when the modal appears. There is no background behind the modal that covers the entire web application as well. I set the correct classes, but still no luck.
Here is my button:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
Add Function
</button>
The modal itself:
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #e0e9f5">
<h2 class="panel-title">Employee Function - Add</h2>
</div>
<div class="panel-body">
<div class="well">
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Code:
</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Description:
</h5>
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Legacy Function Code:</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Active?</h5>
</div>
<div class="col-md-1">
<input type="radio">
<h5>Yes</h5>
</div>
<div class="col-md-2">
<input type="radio">
<h5>No</h5>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6" align="right">
<button type="button" class="btn btn-info btn-lg">Save</button>
</div>
<div class="col-md-6" align="left">
<button type="button" class="btn btn-warning btn-lg"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an example is what I would like to achieve:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
Any help is appreciated. Thank you.
I believe that you have simply forgotten to add boostrap CSS + JS or jQuery. Below is a code snippet, with your exact code, but with boostrap CSS + JS and jQuery included. Note that jQuery must be before the boostrap JS link, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
All of that should go in the <head> tag (or at the bottom of the <body> tag)
<!-- Stuff for the <head> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- end <head> tag -->
<!-- Stuff for the <body> -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
Add Function
</button>
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #e0e9f5">
<h2 class="panel-title">Employee Function - Add</h2>
</div>
<div class="panel-body">
<div class="well">
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Code:
</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>
<span style="color: red">* </span>Description:
</h5>
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Legacy Function Code:</h5>
</div>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<br />
<div class="row">
<div class="col-md-5" align="right">
<h5>Active?</h5>
</div>
<div class="col-md-1">
<input type="radio">
<h5>Yes</h5>
</div>
<div class="col-md-2">
<input type="radio">
<h5>No</h5>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6" align="right">
<button type="button" class="btn btn-info btn-lg">Save</button>
</div>
<div class="col-md-6" align="left">
<button type="button" class="btn btn-warning btn-lg" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
P.S. The result looks better when you expand the snippet before running it, because otherwise the output has a small width which messes things up (which could be an issue on small devices)
I would like to ask how I can stretch the width throughout the modal form.
Here is my code:
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- 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 Employee</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and it shows like this:
input text problem
Is there any way that I could fix this problem.
I think it has something to do with the bootstrap library but I don't know where it is located.
You have to use bootstrap grid system.
#inpt {
width: 100%;
}
.modal-body {
height: 200px;}
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<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>
button
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- 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 Employee</h4>
</div>
<div class="modal-body">
<div class="form-group col-xs-12">
<input id="inpt" type="text" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try this:
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- 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 Employee</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/KyleMit/0fscmf3L/
Credits: Kyle Mitofsky
Im pretty new to coding and i've been trying to make a wepage that works as a user interface. In the UI there is buttons that is suppose to launch application using javaScript (not quite there yet) and 2 buttons that open modals on top of the current screen: Help and Settings.
Code for the modals:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name:</label>
<input type="text" id="wlanName" size="15">
<label>Passphrase:</label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
The issue is, that the first modal works fine. Second modal only "dims" the background, but the modal it self wont come visible. In this case, the settings work fine, but the help does not. If swap the help code before the settings code, then help works and settings does not.
But, when i coded it, i had typo. The second div of the modal were typed
instead of but everything worked, after i switched the
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name: </label>
<input type="text" id="wlanName" size="15">
<label>Passphrase: </label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You forgot to mention </div>
hope this works.
You had missing closing tags for your modal divs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name:</label>
<input type="text" id="wlanName" size="15">
<label>Passphrase:</label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>