Hiding a parent modal on click of a child div - javascript

I have a tr onclick of which I have a modal. Also there is a button is one of the columns in tr on click of which I have another modal opening. But when I click on the button both the modals open. I want to hide the parent modal. I have used modal.(hide) which doesnt work
$(document).ready(function(e){
$(".roundButton").click(function(e){
$('#caseModal').modal('hide');
});
$(".ticketTable").delegate("tr.rows", "click", function(){
var p=$(this).position();
var t=p.top+10;
$(".contentModal").css("top",t,"important");
});
});
#dropDownNote{
background-color: white;
color: black;
border-color: black;
width: 45%;
}
.dropdown-menu{
position: relative!important;
border-radius: 0px;
float:none !important;
width: 45%;
margin-left: 27.5%;
}
.modal-header{
background-color: #4378B8;
color: white;
font-weight: 10%;
}
.contentModal{
border-radius: 0px;
background-color: #adc4e1;
height: 125px;
}
#type,#commentForm{
text-align: left;
margin-left: 27.5%;
}
#cancelLink{
margin-right: 10px;
text-decoration:underline;
}
.modal-footer{
border-top:none;
}
.modal-footer-content{
width: 63%
}
#comment{
width: 62%;
border-color: black;
}
.table tr{
cursor: pointer;
}
#caseModal table td{
text-align: left;
width: 70%;
}
#tlist{
text-align:center;
}
.roundButtonList{
border-radius: 25px;
border-width: 0.1px;
border-color: #3b3b3b;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ticket List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!--Modal Start-->
<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-hidden="true">×</button>
<h4 class="modal-title">ADD NOTE OR ESCALATE TICKETS</h4>
</div>
<div class="modal-body">
<p>Fill in the information below and submit your note</p>
<br>
<div id="modal-body-content">
<p id="type">Select type of note</p>
<div class="dropdown">
<button id="dropDownNote" class="btn btn-primary dropdown" type="button" data-toggle="dropdown">Add Note
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Escalate Tier 1</li>
<li>Escalate Tier 2</li>
</ul>
</div>
<br>
<div id="commentForm" class="form-group">
<p>Add Comments</p>
<textarea class="form-control" rows="4" id="comment"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<div class="modal-footer-content">
<a id="cancelLink" data-toggle="tab" href="#" data-dismiss="modal">CANCEL</a>
<button type="button" class="btn btn-primary">SUBMIT</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal End-->
<!--Case Modal Start-->
<div id="caseModal" class="modal fade">
<div class="modal-dialog listModalDialog modal-lg">
<div class="modal-content contentModal">
<div class="col-lg-6">
<table id="tlist">
  <tr>
    <th>Service/Device</th>
    <th>Status</th>
  </tr>
<tr>
<td>Service 12345</td>
<td>Critical</td>
</tr>
<tr>
<td>Service 12345</td>
<td>Critical</td>
</tr>
<tr>
<td>Device 12345</td>
<td>Critical</td>
</tr>
</table>
</div>
<div class="col-lg-6"><button type="button" class="roundButtonList">View Location Details</button></div>
</div>
</div>
</div>
<!--Case Modal End-->
<div>
<ul class="nav nav-tabs">
<li class="active"><a class="tabsInactive" data-toggle="tab" href="#home">OPEN TICKETS</a></li>
<li ><a class="tabsInactive" data-toggle="tab" href="#menu1">CLOSED TICKETS</a></li>
<li ><a class="tabsInactive" data-toggle="tab" href="#menu2">ALL TICKETS</a></li>
</ul>
</div>
<br>
<div>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-filter"></span>
</button>No Filter Selected
<span class="download">
<u>Download</u>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-download-alt"></span>
</button>
</span>
</div>
<br>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="table-responsive">
<table class="table table-hover ticketTable">
<thead>
<tr>
<th>Ticket ID</th>
<th>Cust Loc ID</th>
</tr>
</thead>
<tbody>
<tr id="tkt1" class="clickable-row rows" data-href="#" data-toggle="modal" data-target="#caseModal">
<td>12321443-Open</td>
<td>ABC-12321443</td>
<td>Technical Tickets</td>
<td>Remote Ticket</td>
<td>Open-Dispatch</td>
<td>Critical</td>
<td>Cable</td>
<td><div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div>
</div>
</td>
<td>0.5</td>
<td> <button type="button" class="roundButton" data-toggle="modal" data-target="#myModal">Add Note/Escalate</button></td>
</tr>
<tr id="tkt2" class="clickable-row rows" data-href="#" data-toggle="modal" data-target="#caseModal">
<td>12321444-Open</td>
<td>ABC-12321444</td>
<td>Technical Tickets</td>
<td>Remote Ticket</td>
<td>Open-PAM Case</td>
<td>Critical</td>
<td>Fiber</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
</div>
</div>
</td>
<td>1.5</td>
<td> <button type="button" class="roundButton" data-toggle="modal" data-target="#myModal">Add Note/Escalate</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>


you should use event.stopPropagation() in order to stop the event from bubbling.
change your button click event to this
$(".roundButton").click(function(e){
e.stopPropagation();
$('#caseModal').modal('hide');
});
source: https://api.jquery.com/event.stoppropagation/

Related

Content is not sized correctly for the viewport

I am deploying my webiste to production and running the Lighthouse audit. The audit is throwing an error when running the audit. It is tell me that the "The viewport size of 373px does not match the window size of 360px". I have validated my HTML and CSS but have not found the specific error. I am not sure if it is in the .style.width of my side nav bars.
Javascript:
function openNav() {
document.getElementById("mySidenav").style.width = "150px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "150px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
function openNav3() {
document.getElementById("mySidenav3").style.width = "150px";
}
function closeNav3() {
document.getElementById("mySidenav3").style.width = "0";
}
CSS
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.imgHoover:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
}
.imgHoover {
padding: 10px 16px;
margin: 10px 0;
/*box-shadow: 2px 2px grey;*/
border-bottom: 1px solid #fafafa;
/*border: 5px solid #fab95b;*/
}
#form1 {
padding: 10px;
border: 1px solid #666;
background: #fff;
display: none;
justify-content: center;
}
#form2 {
padding: 10px;
border: 1px solid #666;
background: #fff;
justify-content: center;
}
/* card center */
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
/*box-shadow: 5px 5px grey*/
}
.card:hover {
box-shadow: 4px 8px 12px rgba(0,0,0,0.1);
}
/* side-nav */
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #818181;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
html{overflow-x: hidden;}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="manifest" href="manifest.json">
<!-- ios support -->
<link rel="apple-touch-icon" href="images/logo/icon-96x96.png">
<meta name="apple-mobile-web-app-status-bar" content="#292927">
<meta name="theme-color" content="#292927">
<title>Home-Online Supplements</title>
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #b8dff0;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo/logo.png" alt="" width="30" height="24" class="d-inline-block align-top">
NextGen-Fitness</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" id="formButton">Login</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Protein</a></li>
<li><a class="dropdown-item" href="#">Vitamins</a></li>
<li><a class="dropdown-item" href="#">Preworkout</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" tabindex="-1" >Contact Us</a>
</li>
</ul>
<a class="nav-link text-left" href="#" id="userRegistered" style="color:black;" ></a>
<!-- <form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form> -->
</div>
</div>
</nav>
<div class="center-block">
<form id="form1">
<input type="text" name="firstName" placeholder="First Name" id="fname">
<br><br>
<input type="text" name="lastName" placeholder="Last Name" id="lname">
<br><br>
<input type="text" name="email" placeholder="Email" id="email">
<br><br>
<button type="button" class="btn btn-dark" id="btnUser" onclick="funcUser()">Login</button>
</form>
</div>
<!--Side Navbar #1 -->
<div id="mySidenav" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/fatburner-logo2.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #2 -->
<div id="mySidenav2" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/preworkout-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #3 -->
<div id="mySidenav3" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>-->
<div class="bg-light">
<div class="container">
<div class="row align-items-center no-gutter">
<div class="col-xl-5 col-lg-6 col-md-12">
<div class="py-5 py-lg-0">
<a class="btn btn-ligth" style="background-color: #fab95b;" href="products.html">Browse all Products</a>
<!--<a class="btn btn-light" style="background-color: #fab95b;">Are you a Store Owner?</a>-->
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/gym-page.jpg" alt class="img-fluid">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-logo2.png" alt="fatBurner" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav()">Fatburner</a>
</div>
<div class="column">
<img src="images/preworkout-logo.png" alt="preWorkout" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav2()">Preworkout</a>
</div>
<div class="column">
<img src="images/protein-logo2.png" alt="protein" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav3()">Protein</a>
</div>
</div>
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/supplement-frontpage.jpg" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
" Hand-picked ingredients and expertly crafted products,
designed for the modern athletes and trainers."
</p>
</div>
<br>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-frontpage.png" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
Benefits Of Protein Supplementation<br>
1.Fast digesting and more easily absorbed than other protein sources<br>
2.Increased muscle mass, especially when taken post-workout<br>
3.Improved appetite control, and greater feelings of fullness when dieting<br>
</p>
</div>
<div class="footer">
<div class="container">
<div class="row align-items-center no-gutters border-top py-2">
<div class="col-md-6 col-12">
<span> 2021 NextGen. All Rights Reserved</span>
</div>
<div class="col-12 col-md-6">
<nav class="nav justify-content-center justify-content-md-end">
<a class="nav-link active pl-0" href="#!">Privacy</a>
<a class="nav-link" href="#!">Terms</a>
<a class="nav-link" href="#!">Feedback</a>
</nav>
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="js/scripts.js" ></script>
</body>
</html>

You could try docking the devtools at the bottom, or in a different window, as in this answer. Sadly, this is still an issue in 2021.

Filter a table with text and button inputs using javascript?

Is it possible to filter the same table with more than one input? If so- can it be done with both text and button based inputs?
Is it possible to add filtering buttons to this for example? (my apologies if it breaks. I tried trimming back the code as much as possible..):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Albion Next Generation Arming Swords</title>
</head>
<body>
<div class="wrapper">
<header>
<nav style="z-index: 999; float: right; width: 100%;>
<div style="width: 25%; float: right; margin-top: 1%; margin-right: 1%;
font-family: Centaur; font-size: 16px" data-tip="Exe. 'Laird', 'Type
XII' or 'Scottish'">
<input style="margin-left: 0%; width: 100%; " type="text" id="myInput"
onkeyup="myFunction()" placeholder=" Filter by name or bladetype or key-
term" title="Type in a name"></div>
</nav>
</header>
<body>
<section style="padding-top: 11%; float: left; width: 90%; z-index:
999999999999999">
<table id="SwordTable" style="z-index: 999999999999999999999999; width:
100%; height: 100%; margin-right: 15%; padding-left: 2%; font-size: 80%"
cellpadding="2">
<tbody>
<tr>
<td style="width: 100%">
<td style="width: auto"></td>
</tr>
<tr>
<td style="padding-bottom: 5%">
<div class="dropdown">
<a href="Albion Front Page.html">
<img style="float: right" src="images/NORMAN.png" width="95%"
height="auto" alt=""/></a>
<div class="dropdown-content">
<div class="desc">
<p style="text-align: left; font-family: Centaur; font-size: 100%">The
Norman<br>Type Xa<br>$880</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 5%">
<div style="width: 100%" class="dropdown">
<a href="Albion Front Page.html">
<img style="float: right" src="images/SENLAC.png" width="100%"
height="auto" alt=""/></a>
<div class="dropdown-content">
<div class="desc">
<p style="text-align: left; font-family: Centaur; font-size: 100%">The
Senlac<br>Type Xa<br>$880</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 5%">
<div style="width: 100%" class="dropdown">
<a href="Albion Front Page.html">
<img style="float: right" src="images/Templar.png" width="98%"
height="auto" alt=""/></a>
<div style="float: right" class="dropdown-content">
<div class="desc">
<p style="text-align: left; font-family: Centaur; font-size: 100%">The
Templar<br>Type Xa<br>$880</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/REEVE.png"
width="100%" height="auto" alt=""/></a><div class="dropdown-content">
<div class="desc"><p style="text-align: left; font-family: Centaur;
font-size: 100%">The Reeve<br>Late Anglo-Saxon sword<br>Type
X<br>$840</p></div> </div>
</div></td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/BAYEUX.png"
width="93%" height="auto" alt=""/></a><div class="dropdown-content"><div
class="desc"><p style="text-align: left; font-family: Centaur; font-
size: 100%">The Bayeux<br>Type X<br>$880</p></div> </div>
</div></td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/VIGIL.png"
width="93%" height="auto" alt=""/></a><div class="dropdown-content"><div
class="desc"><p style="text-align: left; font-family: Centaur; font-
size: 100%">The Vigil<br>Type X<br>$1,210</p></div> </div>
</div></td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/Oakshott.png"
width="98%" height="auto" alt=""/></a><div class="dropdown-content"><div
class="desc"><p style="text-align: left; font-family: Centaur; font-size:
100%">The Oakeshott<br>Type Xa<br>$1,210</p></div> </div>
</div></td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("SwordTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</section>
<div class="push" style="padding-bottom: 20%"></div>
</div>
</body>
</html>
Basically, I want to add a number of search buttons beneath the search-bar that will filter products based on various traits.

Angularjs : how to write options code for quiz pallet?

In the process of making a quiz website, I have prepared a Question pallet of 25.In that, if I select option 1 on a question and moving to another it seems to be option 1 for rest of the questions.I used radio buttons for the options but I can't figure it out how to prepare answers to individual questions.I used angular js for this and bootstrap also.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
<title>quizzzzzz</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background-color: khaki;
}
.navbar-custom {
background-color: black;
padding: 0px;
}
.navbar-custom .navbar-brand {
font-family: Geneva;
font-size: 30pt;
color: white;
}
.toggleButton {
width: 160px;
height: 60px;
line-height: 60px;
margin: 0 auto;
background: #D35400;
color: #fff;
border: 3px solid rgba(255, 255, 255, 0.5);
text-align: center;
cursor: pointer;
user-select: none;
text-transform: uppercase;
}
</style>
</head>
<body ng-app="mainModule">
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="ex.html">Quiz</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<form class="navbar-form navbar-right">
</form>
</div>
</div>
</nav>
<div ng-hide="p1">
<div class="input-field col s12 m6 14">
<center>
<i class="fa fa-search"></i>
<input id="search" type="text" style="width:350px" ng-model='search'>
<label for="search">Search</label>
</center>
</div>
<section class="pannel-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default p1">
<div class="panel-body">
Please Read The Following Instruction Carefully
</div>
</div>
</div>
</div>
</div>
</section>
<section class="technologies" ng-controller="techlistcon">
<center><button class="btn btn-primary" ng-click="fun()">START</button></center>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" ng-repeat="tech in techlist|filter:search">
<div class="box box-block bg-white tile tile-1 mb-2">
<div class="t-content">
<h1 class="mb-1">{{tech.name}}</h1>
More>>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{tech_full.name}}</h4>
</div>
<table class="table">
<tr>
<td><img ng-src="{{tech_full.img}}" width="100"></td>
<td>{{tech_full.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div ng-show="p1">
<section class="pannel-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default p1">
<div class="panel-body">
Online Exam : You Can Test Your Skills
</div>
</div>
</div>
</div>
</div>
</section>
<section class="questions" ng-controller="questionlistcon">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="q-box">
<div class="question">
<h4>{{currentIndex+1}}.{{currentque.question}}</h4>
</div>
<div class="options">
<ul>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o1}}</li>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o2}}</li>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o3}}</li>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o4}}</li><br>
</ul>
<button class="btn btn-warning" ng-hide="b" ng-click="next()">Next</button>
<button class="btn btn-warning" ng-hide="b" ng-click="prev()">prev</button>
<button class="btn btn-warning" ng-show="b">Finish</button>
</div>
</div>
</div>
<div class="col-md-5">
<div class="q-box">
<h4>Question Palette</h4>
<div id="main_right">
<div class="questionpallat">
<ul>
<li ng-repeat="x in questions">
<a class="btn btn-danger buttons" ng-click="currentq($index)" style="width:35px">{{$index+1}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="pannel-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default p1">
<div class="panel-body">
<center> Here comes your RESULT>>>>>>>>>>>>></center>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/techlist.js"></script>
</body>
</html>
Javascript :
var vm=angular.module("quizApp",[]);
vm.controller("technologies",function($scope){
$scope.technologyar=["HTML5","PHP"];
});
vm.controller("questions",function($scope){
var index=0;
$scope.questionar=[
{
question:'What does HTML stand for?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
},
{
question:'PHP is?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
},
{
question:'Java is?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
},
{
question:'css is?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
}
];
$scope.currentque=$scope.questionar[index];
$scope.next=function(){
if(index<$scope.questionar.length-1){
index++;
$scope.currentque=$scope.questionar[index];
}
}
$scope.prev=function(){
if(index>0){
index--;
$scope.currentque=$scope.questionar[index];
}
}
$scope.currentq=function(code){
index=code;
$scope.currentque=$scope.questionar[index];
}
});

modal popup not showing on top of another modal popup

Updated
I am trying to use modal as confirmation prompt on another modal but confirmation modal is not vissible on onclick. Here is the modals properties I set.
Parent Modal.
I am calling my parent modal in my asmx file and then I am calling my child modal function in an asmx file as well.
<div id="ShowDetails" class="popup" tabindex="-1" style="position:absolute;" role="dialog">
<div class="panel panel-green">
<div class="panel-heading">Parchase Request Details</div>
<div class="panel-body">
<div class=" col-md-12">
<div class="form-inline">
<input id="pdid" style="display: none; width: 90PX; margin: 2px;" type="hidden" />
<%--<asp:HiddenField ID="PDId" runat="server" />--%>
<table class="table table-condensed">
<tr>
<td>
<input id="item" style="display: none; width: 90PX; margin: 2px;" /></td>
<td>
<input id="quantity" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="eprice" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="make" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="discription" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<a id="DoneEditingbtn" role="button" onclick="DoneEditing()" style="color: #72c02c; display: none; width: 100PX; margin: 2px;">Update</a>
</td>
<td><a id="cancleediting" role="button" onclick="cancleeditingdetail()" style="color: #72c02c; display: none; width: 100PX; margin: 2px;">cancel</a>
</td>
</tr>
</table>
<table class="table table-condensed">
<thead>
<tr style="background-color: #01cc66;">
<th>Item Name</th>
<th>Quantity</th>
<th>Estimated Price</th>
<th>Make</th>
<th>Discription</th>
<th>Options</th>
</tr>
</thead>
<tbody id="tblgetdetails">
</tbody>
</table>
<div id="Alert"></div>
</div>
</div>
</div>
<span class="popup-btn-close" data-dismiss="modal">close</span>
</div>
</div>
Confirmation Modal.
<div id="ApproveMod" class="popup" style=" z-index:2; position:absolute; left: 50%; width: 40%; border: 10px solid #666;">
<div class="col-lg-6">
<i>Are you sure to Approve this data?</i>
</div>
<i id="pheadIdApp"></i>
<i id="pbdIdApp"></i>
<div class="col-lg-6">
<a class="btn-u btn-u-red" href="#" role='button' style="text-align: center; width: 45%;" onclick="Approve()">Yes </a>
<button class="btn-u btn-u-green-custom " style="text-align: center; width: 45%;" data-dismiss="modal">NO</button>
</div>
</div>
The Parent modal is showing properly but when I click on parent modal button which should toggle child modal, is not working, In ASMX I have defined my child modal function on onclick as following.
<a role='button' class='form-control' onclick='AppModal(PHId+","+PBDId)'>Approve</a>
Here is the child calling approach I used in script.
function AppModal(phid,pbdid) {
$("#pheadIdApp").val(phid);
$("#pbdIdApp").val(pbdid);
$("#ApproveMod").modal("show");
}
It should work properly I have used it many times but now I am stuck and have no idea where I might have missed the trick any kind of help is much much apriciated.

Its Really Funny Yesterday I got an answer to my problem by you which was about the same problem and now I find you stuck here.
Change your child modal position to relative and assign z-index value greater then 1040 which is for default layer.

image thumbnail with angularjs

https://github.com/nervgh/angular-file-upload
I am using angular-file-upload plugin for file upload. I am adding some more features to it I want to show the image thumbnail or just a thumbnail of file uploaded. Also I am adding the name and description of the file. I am done with the name and description part but unable to show the preview of the file as soon as it is browsed. How can I do that?
Thanks.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!DOCTYPE html>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<title>Simple example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<!-- Fix for old browsers -->
<script src="http://nervgh.github.io/js/es5-shim.min.js"></script>
<script src="http://nervgh.github.io/js/es5-sham.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="../console-sham.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!--<script src="../bower_components/angular/angular.js"></script>-->
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="../../angular-file-upload.js"></script>
<script src="controllers.js"></script>
<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<style>
.my-drop-zone { border: dotted 3px lightgray; }
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; }
html, body { height: 100%; }
.upload-button {
padding: 4px;
border: 1px solid black;
border-radius: 5px;
display: block;
float: left;
}
</style>
<script>
$(document).ready(function() {
var readURL = function(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.profile-pic').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".file-upload").on('change', function(){
readURL(this);
});
$(".upload-button").on('click', function() {
$(".file-upload").click();
});
});
</script>
</head>
<!-- 1. nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
<body ng-controller="AppController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Select files</h3>
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
Multiple
<input type="file" nv-file-select="" accept="image/*" uploader="uploader" multiple /><br/>
Single
<div class="upload-button">Upload Image</div>
<input type="file" class="file-upload" nv-file-select="" accept="image/*" uploader="uploader" />
</div>
<div class="col-md-9" style="margin-bottom: 40px">
<h3>Upload queue</h3>
<p>Queue length: {{ uploader.queue.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td>
<img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" style="width:30px"/>
<strong>{{ item.file.name }}</strong></td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have used jquery in this.

Categories

Resources