I've recently been having a problem with modals in Bootsrap 3.
I'm working on a test website (not anything I would actually put on the web) and have 3 pictures (each in a col-md-4) next to each other, and I am planning on having one button centered under each picture which can be clicked for a modal to show up with more info.
I set up the first modal, which worked perfectly.
However, when I added the second one, I found that when you click either button, both modals show up on top of each other, (the second one first) and when you press "Back to home", it goes to the other modal.
You can only go back to home by pressing the "X" one or two times.
I am almost certain that this is due to my JavaScript in <head> being very incorrect, but I am not very good at JS and have no idea what I did wrong...
Here is the html so you can inspect my handiwork:
<!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>space</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#chimechoModal").modal('show');
});
});
</script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#eeveeModal").modal('show');
});
});
</script>
</head>
<body>
<div class="container custom-container">
<div class="row">
<div class="col-xs-12" style="height:15px;"></div>
</div>
<div class="row">
<div class="col-md-6">
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Mini Pokedex</h1>
<h4>Created by spaceman1980</h4>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive center-block" src="images/chimecho.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/eevee.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/james.jpg" style="width: 100%; height: auto;">
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chimecho">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="chimechoModal" tabindex="-1" role="dialog" aria-labelledby="chimechoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="chimechoLabel">The Wind Chime Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Chimecho makes its cries echo inside its hollow body. When this Pokémon becomes enraged, its cries result in ultrasonic waves that have the power to knock foes flying.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eevee">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="eeveeModal" tabindex="-1" role="dialog" aria-labelledby="eeveeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="eeveeLabel">The Evolution Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
1) Even though you are using inline javascript, there is no need to define the <script> tag twice
2) This line in your code says that whenever an element in your DOM with the class 'btn' is clicked it will perform a function (open a modal in your case). You are listening to both the 'btn' elements' click events.
$(".btn").click(function(){
You can assign a different class to each button for each modal type. For example,
<script type="text/javascript">
<button type="button" class="btn btn-primary btn-chimecho" data-toggle="modal" data-target="#chimecho">
<button type="button" class="btn btn-primary btn-eevee" data-toggle="modal" data-target="#eevee">
$(function(){
$(".btn-chimecho").click(function(){
$("#chimechoModal").modal('show');
});
$(".btn-eevee").click(function(){
$("#eeveeModal").modal('show');
});
});
</script>
It's because you're using .btn (a common class shared on both buttons) to trigger the modal. So when you click on any .btn, it fires both modals.
Either add a class/id or use the data-target attribute on your click handler to fire the appropriate modal, or since your button is right before the modal element in your html, you can just use a single click handler with $('.btn') and fire the modal via $(this).next().modal().
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!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>space</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<script type="text/javascript">
$(function() {
$(".btn").on('click',function() {
$(this).next().modal("show");
});
});
</script>
</head>
<body>
<div class="container custom-container">
<div class="row">
<div class="col-xs-12" style="height:15px;"></div>
</div>
<div class="row">
<div class="col-md-6">
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Mini Pokedex</h1>
<h4>Created by spaceman1980</h4>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive center-block" src="images/chimecho.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/eevee.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/james.jpg" style="width: 100%; height: auto;">
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chimecho">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="chimechoModal" tabindex="-1" role="dialog" aria-labelledby="chimechoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="chimechoLabel">The Wind Chime Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Chimecho makes its cries echo inside its hollow body. When this Pokémon becomes enraged, its cries result in ultrasonic waves that have the power to knock foes flying.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eevee">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="eeveeModal" tabindex="-1" role="dialog" aria-labelledby="eeveeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="eeveeLabel">The Evolution Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
The problem is on clicking the item in the popup modal, the data-value is reflecting all the input fields
I have tried this code and it works with that but it is also changing others. The data value should reflect on the particular input field only. currently it is changing all the previous and next input fields
function openmodal(e) {
//prevent(default);
//document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
$('#myModal').modal('show');
$(document).on("click", ".hello", function(event){
event.preventDefault();
e.value=$(this).attr("data-id");
alert(e.value);
$('#myModal').modal('hide');
});
}
<!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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="openmodal(this);"/>
</div>
</div>
</div>
<!-- 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">
<a class="hello" data-id="2">2</p>
<a class="hello" data-id="3">3</p>
<a class="hello" data-id="4">4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
function openmodal(input) {
$('#myModal').modal('show');
$(".hello").unbind().click(function(event){
$(input).val($(this).attr("data-id"));
$('#myModal').modal('hide');
});
}
<!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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="return openmodal(this);"/>
</div>
</div>
</div>
<!-- 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">
<a class="hello" data-id="2" >2</p>
<a class="hello" data-id="3" >3</p>
<a class="hello" data-id="4" >4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am stuck in a small but weird problem. I have two modals on my page, I want to load the first modal when the page loads, I have done the code to click a button and open the modal but both the modals come up. It has a effect of opening from left to right, I want to keep that so I had added the class in the jquery code. I just want to load the modal that has the id="ModalLogin". As you can see both the modals load when button is clicked. Below is the snippet. Please help.
$('.btn').click(function() {
$('.modal')
.prop('class', 'modal fade') // revert to default
.addClass($(this).data('direction'));
$('.modal').modal('show');
});
<!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">
<link href="https://www.topconsumerreviews.com/new-common-code/new-style.css" rel="stylesheet" type="text/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>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<ul class="product-rankings-font" style="list-style: none;padding-left: 18px;padding-bottom: 10px;padding: 10px;">
<li>Select2 </li>
<!-- <li>Activate Modal</li> -->
<li style="text-align: center;padding-top: 5px;"><a class='btn btn-primary btn clos' style="width: 160px;" id="bty" data-direction='left'>bty</a></li>
</ul>
<!---- Forgot Password Popup --->
<div class="modal fade" id="ModalForgotPassword" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Slider 2</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<button class="btn btn-primary">Option 4</button>
</div>
<div class="form-group">
<button class="btn btn-primary">Option 5</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!---- Forgot Password Popup --->
<!---- Login Popup --->
<div class="modal fade" id="ModalLogin" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="font-size: 18px;text-align: center;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">Text Sample 1</h4>
<h4 class="modal-title" style="color: black;">Text Sample 2</h4>
</div>
<div class="modal-body" style="font-size: 16px">
<form action="comparelist.php" method="post">
<ul id="answers-type1" class="myclass" style="list-style: none;padding-right: 10px;padding-left: 10px;">
<li class="module form-check-label" style="background: #668693;" value="Listol" data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"><span>Option 1</span></li>
<li class="module form-check-label" style="background: #668693;"><span>Option 2</span></li>
</ul>
</div>
</div>
</div>
</div>
<!---- Login Popup --->
</body>
</html>
I would like to offer another way to use modals: pure CSS.
here is the reference: click here
The idea is you don't need any js,
each modal will be in a div wrapper with id. like this:
<div id="modalWrapper">
and then you will have a hyperlink where ever you want
<a href="#modalWrapper">
and the trick is with CSS -
you initially set the position of the modal as absolute and unseen (left:-999em)
and then with the target selector, you bring the modal to the center:
#modalWrapper:target {
left:0;
transition:etc..
}
and when you do like this - you will open only the desired modal with the button.
hope this will make some help for you.
my first answer on SO
I'm trying to count the number of div classes using this:
if(end($array) !=0) { ?>
<div class="circleRed" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<script> document.getElementById("demoRed").innerHTML = $(".circleRed").length; </script>
// code to trigger modal
<?php
} elseif ($output > 100000){ ?>
<div class="circleYellow" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<script>document.getElementById("demoYellow").innerHTML = $(".circleYellow").length; </script>
// trigger modal again
<?php }else{ ?>
<div class="circleGreen" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
But $().length only displays a value if it finds a matching div class. When no matches are found it returns nothing and I get a blank space for where a 0 should be.
Update: Included my full CSS and HTML source below:
.circleRed {
background: #e60000;
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
transition: all ease-in-out 0.2s;
cursor: pointer;
}
.circleRed:hover {
border: 1px solid: #888;
background-color: #ff1a1a;
}
.circleGreen {
background: #00e600;
width: 20px;
height: 20px;
border-radius: 50px;
display: inline-block;
transition: all ease-in-out 0.2s;
cursor: pointer;
}
.circleGreen:hover {
border: 1px solid: #888;
background-color: #1aff1a;
}
.circleYellow {
background: #f9f906;
height: 20px;
width: 20px;
border-radius: 50px;
display: inline-block;
transition: all ease-in-out 0.2s;
cursor: pointer;
}
.circleYellow:hover {
border: 1px solid: #888;
background-color: #ffff00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Favicons -->
<link rel="apple-touch-icon" href="../assets/img/apple-icon.png">
//<link rel="icon" href="../assets/img/favicon.png">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link rel="stylesheet" href="../assets/css/material-dashboard.css?v=2.0.0">
<link href="../assets/assets-for-demo/demo.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<scirpt src="https://code/jquery.com/jquery-1.10.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="">
<div class="wrapper">
<div class="sidebar" data-color="azure" data-image="../assets/img/sidebar-4.jpg" style="background-image: url("../assets/img/sidebar-4.jpg");">
<div class="logo">
<a>
<img src="../assets/img/logo.png"/></a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="">
<p>Dashboard</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="#pablo"> Dashboard</a>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">thumb_up</i>
</div>
<p class="card-category">Active PIs</p>
<h3 class="card-title"><p id="demoGreen"></p></h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="material-icons">warning</i>
</div>
<p class="card-category">Critical PIs</p>
<h3 class="card-title"><p id="demoYellow"></p></h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-danger card-header-icon">
<div class="card-icon">
<i class="material-icons">thumb_down</i>
</div>
<p class="card-category">Inactive PIs</p>
<h3 class="card-title"><p id="demoRed"></p></h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-primary card-header-icon">
<div class="card-icon">
<i class="material-icons">error</i>
</div>
<p class="card-category">PIs With Comms Down</p>
<h3 class="card-title"><p id="demoGrey"></p></h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" >
<div class="card card-chart" >
<div class="card-header card-header-rose">
<div class="ct-chart" id="completedTasksChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Current Status</h4>
<p class="card-category">
<div class="circleRed" title= Guildford Test data-toggle="modal" data-target="#myModal0"></div>
<script> document.getElementById("demoRed").innerHTML = $(".circleRed").length; </script>
<div class="modal" id="myModal0" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel0" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLable0">Location: Guildford Test </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current issue: Missing video file. Please check /var/lib/surround/Videos.</p>
<p>Current log file size: 6.4G </p>
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Burton on Trent data-toggle="modal" data-target="#myModal1"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel1">Location: Guildford </h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size: 9.8M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Woking data-toggle="modal" data-target="#myModal2"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel2">Location: Woking </h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size:
17M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Staines data-toggle="modal" data-target="#myModal3"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel3">Location: Staines </h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size:
9.8M</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Swindon data-toggle="modal" data-target="#myModal4"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel4">Location: Swindon </h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size: 2.4M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Luton data-toggle="modal" data-target="#myModal5"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel5" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel5">Location: Luton</h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size:
32M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="circleGrey" title= Harrogate data-toogle="modal" data-target="#myModal6"></div>
<script> document.getElementById("demoGrey").innerHTML = $('div.circleGrey').length;</script>
<!-- trigger modal with button -->
<div class="circleGreen" title= Wolverhampton data-toggle="modal" data-target="#myModal6"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel6" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel6">Location: Wolverhampton</h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size:
28M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- trigger modal with button -->
<div class="circleGreen" title= Ipswich data-toggle="modal" data-target="#myModal7"></div>
<script>document.getElementById("demoGreen").innerHTML = $(".circleGreen").length; </script>
<!-- modal -->
<div class="modal" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel7" aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="exampleModalLabel7">Location: Ipswich</h4>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: vid.h264</p>
<p>Current log file size: 1.7M </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</p>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> 02:17 PM<br> </div>
</div>
</div>
</div>
</div>
<div class="row">
<footer class="footer ">
<div class="container-fluid">
<nav class="pull-left">
<ul>
</li>
</ul>
</nav>
</div>
</footer>
</div>
</div>
</body>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/bootstrap-material-design.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Charts Plugin, full documentation here: https://gionkunz.github.io/chartist-js/ -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Library for adding dinamically elements -->
<script src="../assets/js/plugins/arrive.min.js" type="text/javascript"></script>
<!-- Notifications Plugin, full documentation here: http://bootstrap-notify.remabledesigns.com/ -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Material Dashboard Core initialisations of plugins and Bootstrap Material Design Library -->
<script src="../assets/js/material-dashboard.js?v=2.0.0"></script>
<!-- demo init -->
<script src="../assets/js/plugins/demo.js"></script>
</html>
Ok as per my comment, I think your problem is that if the class is not there, the script is not output either so that's why you are not showing a zero.
I would move the script out of your php loop:
<?php
if(end($array) !=0) {
?>
<div class="circleRed" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<?php
} elseif ($output > 100000){
?>
<div class="circleYellow" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<?php
}else{
?>
<div class="circleGreen" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
And put it before the closing body tag:
<!-- put this before the closing body tag -->
<script>
// I think you only have these three different colours, if you have any more, include them here
// you could use all jquery here instead of a mixture:
// $('#domGreen').html($(".circleGreen").length); this isthe jquery version of the below line
document.getElementById("demoGreen").innerHTML = $(".circleGreen").length;
document.getElementById("demoGrey").innerHTML = $('div.circleGrey').length;
document.getElementById("demoRed").innerHTML = $(".circleRed").length;
</script>
You could have a use of '||', If the first operand can be converted to true, return it. Otherwise, return the second operand:
false || true
true
I want to add popup window on my html page when user click add to cart button. Popupwindow need to be open only when the extra_option flag is yes. Otherwise it should just add the product into the basket (which is fine in my case).
Here is my code.
<form method="post">
<div class="col-md-12 col-sm-12 col-xs-12 pContainer">
<div class="col-md-3 col-sm-3 col-xs-12 wrap">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<img src="img/delivery/products/<?=$r['ImgUrl'];?>" class="img img-responsive" style="width:auto">
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="col-md-9 col-sm-9 col-xs-12 pNameNdiscription">
<h4> <b> <?=$r['ProductName']?> </b> </h4>
<p> <?=$r['Description']?> </p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 wrap" style="float:right" >
<div class="col-md-12 col-sm-12 col-xs-6 priceWrapper">
<h4 style="color:black" class="pPRICE"> <b> Rs. <?=$r['Price']?> </b> </h4>
</div>
<div class="col-md-12 col-sm-12 col-xs-6 add2CartWrapper">
<?php if($r['extra_option'] == 'yes') {
// if extra_option is 'yes' when user click on 'Add To Cart' I want to show here a popup widow to select the extra option. Otherwise just add the product into the cart.
// I am unable to properly add a model/popup windo.
<input type="button" id="ad2cart" name="ad2cart" class="btn add2Cart" value="Add To Cart" onclick='updateCart("<?=$r['id']?>")'>
}
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-xs-12"> <hr> </div>
</div>
I guess you should try bootstrap modal class:
The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. It can be used to display alert popups, videos, and images in a website.
<!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.2.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>Modal Example</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">
<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>
</div>
</body>
</html>
Above code is from: LINK
Explanation of above code:
Bootstrap has build in modal and modal-dialog class which displays popup window.
Further you can divide your popup window in sections. That in done in above code.
In above code there are three sections that are added. There are: header, body and footer.
Based on your need you can divide modal into any number of sections.
I have a bootstrap modal that I want to be draggable. For draggable I tried to restrict it using, containment but it disappears when drag action is done for the first time. Here is my code.
$("#feedbackdialog").modal();
$('#feedbackdialog').draggable({
handle: ".modal-header",
cursor: "crosshair",
containment: "parent"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id="feedbackdialog" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comment</h4>
</div>
<div class="modal-body">
<div class="active" id="segtab">
<div align="center" class="form group row">
<textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea>
<button id="savefdb" class="btn">OK</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Firefox version 45.0.2
Run the code in full screen mode(View Full page after running the code snippet) to reproduce the issue. It seems that that modal dialog is moving to top(when run in normal mode).
<div class=" modal fade " id="modalid" tabindex="-1" role="dialog">
<div class="modal-dialog" id="feedbackdialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comment</h4>
</div>
<div class="modal-body">
<div class="active" id="segtab">
<div align="center" class="form group row">
<textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea>
<button id="savefdb" class="btn">OK</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#modalid").modal();
$('#feedbackdialog').draggable({
handle: ".modal-header",
cursor: "move",
containment: "parent"
});
</script>
Give two different id's for modal and draggable div and use modal id as containment parent
Try this snippet. Hope this will help you.
$(function(){
$("#myModal").draggable({
handle: ".modal-dialog"
});
});
.modal
{
overflow: hidden;
height:250px;
width:300px;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/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://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<div class="side-menu" id="sideMenu">
<menu>
<ul class="nav nav-tabs nav-stacked">
<li>Click Me
</li>
</ul>
</menu>
</div>
<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">Settings</h4>
</div>
<div class="modal-body">
<p>Settings</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Greetings!