How do i customize css so the popup alert just like this but instead alert popup focus in a button.
i have use this kind of validation on text box
<div class="form-group">
<label class="control-label col-sm-3" for="judul_laporan">Judul Laporan </label>
<div class="col-sm-5">
<input type="email" class="form-control" id="judul_laporan" >
<span style="color: red" id="warnlaporan"></span>
</div>
</div>
<button type="button" id="save_laporan"></button>
JQuery
$("#save_laporan").click(function(){
var judul_laporan = $('input[name="judul_laporan"]');
if(judul_laporan.val() == ''){
judul_laporan.parent().parent().addClass('has-error');
$('#warnlaporan').text("Judul Laporan Belum Ada");
judul_laporan.focus();
result
}else{
judul_laporan.parent().parent().removeClass('has-error');
$('#warnlaporan').text("");
}
But i dont know how to make a popup alert likes the image ( and it should be button )
You can see the x3schools' documentation. It gives you a sample popup at the top of a div.
This code opens a popup:
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<div class="popup" onclick="myFunction()" style="left: 35px; top: 60px">Click me!
<span class="popuptext" id="myPopup">Popup text...</span>
</div>
You also can use microtip, it is a pretty library witch give you the opportunity to create simply popup. This is the only declaration: <button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">. However, you have to download a package (just 1kb) with rpm in your server.
Related
I would like to implement a popup when I click on a part of a mathjax equation.
Here is what I have so far :
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: relative;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<!DOCTYPE html>
<html>
<head>
<!-- Jquery importation -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- MathJax configuration -->
<script>
MathJax = {
loader: {
load: ['[tex]/action', '[tex]/html']
},
tex: {
packages: {'[+]': ['action', 'html']}
}
};
</script>
<!-- MathJax importation -->
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>
<!-- Link to style sheet -->
<link rel="stylesheet" href="popup.css">
<script>
function clickFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</head>
<body>
<!-- Classical popup -->
<div class="popup" onclick="clickFunction()">Click me!
<span class="popuptext" id="myPopup">this is the acceleration</span>
</div> <br>
<!-- Matjax popup -->
Click here : \( \cssId{popup}{a} = \frac{dv}{dt} \)
<script>
$('#popup').click(function(){
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
});
</script>
</body>
</html>
I would like to make appear "this is the acceleration" when someone clicks on "a" but I don't find a way to associate my click function to a subsection of my equation by only using the \cssId{popup}{a}.
How do I make a popup close when I click off it/click on a different one?
I've used EventListener to perform the function for the first popup, but when I do the same to a second popup the first popup stops working.
I've tried duplicating the JS code using different Function names and ID for the popups.
var popup = document.getElementById("myPopup");
function myFunction() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup.classList.contains('show')) myFunction();
});
var popup = document.getElementById("myPopup2");
function myFunction2() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup.classList.contains('show')) myFunction2();
});
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<h2>Popup2</h2>
<div class="popup" onclick="myFunction2()">Click me to toggle the popup!
<span class="popuptext" id="myPopup2">A Simple Popup again!</span>
</div>
</body>
Simply add another listener on the document, which will close any open modals.
Then add/modify one on your modal which will stop click events from bubbling up.
The end result is, click anywhere and if the click was over the modal, the modal will intercept and block, otherwise clicking anywhere else, then the document will receive the bubbled event and close the modal...
For good measure you can add a listener for the esc keydown event and close any open modals too
I want to display an alert message inside a loop fetching records from the database. The problem is, the popup only works for one item and the other item shows no popup.
What's going wrong?
PHP:
$query = "SELECT * FROM discount
WHERE consecutivedays <= DATEDIFF('$date2','$date1')
AND idbeach = '$idbeach'
ORDER BY consecutivedays desc
LIMIT 1";
$results = mysqli_query($conn, $query);
while($row = $results->fetch_assoc()){
$reserved= $row['discountperc'];
if ($reserved=="yes") {
$getbooking = new WA_MySQLi_RS("getbooking",$sis,1);
$getbooking->setQuery("SELECT `name`,
CONCAT(`datein`,' - ',`dateout`) AS dates,
price,discount,comment
FROM booking
where idseatbeach = '$idseatbeach'
order by datein limit 1");
$getbooking->execute();
$name=$getbooking->getColumnVal("name");
$dates=$getbooking->getColumnVal("dates");
$price=$getbooking->getColumnVal("price");
$discount=$getbooking->getColumnVal("discount");
$comment=$getbooking->getColumnVal("comment");
$message = "Booked by: $name\n
Date range: $dates\n
Price :$price\n
Discount :$discount\n
Comment :$comment";
?>
<div class="item" >
<div class="popup" onclick="myFunction()">
<span class="popuptext" id="myPopup"><?php echo $message;?></span>
<img src="images/umbrelladisactive.png" width="35" height="35"
alt="<?php echo $nameseat; ?> "/>
<p style="margin-right: 0px; color: blue;">Currently Booked</p>
</div>
</div>
<?php
}
}
JavaScript:
var stile = "top=10, left=10, width=450, height=350,
status=no, menubar=no, toolbar=no scrollbars=no";
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
CSS:
.item {
width: 100px;
text-align: center;
display: block;
background-color: transparent;
border: 1px solid transparent;
margin-right: 10px;
margin-bottom: 1px;
float: left;
}
#index-gallery {
width: 50px;
}
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
An ID in HTML must be unique to the document, meaning that you can't repeat it in a loop. I recommend using a class instead, so it can be repeated.
You'll need to popup the element that's associated with (nested inside) whichever element was clicked. I recommend adding an event listener to each .popop that will fire a handler function upon click. The function should find the popup text within the clicked element by using querySelector and toggle its "show" class.
Here's an rudimentary example:
// define a function to show a popup's popuptext.
function popItUp() {
this.querySelector('.popuptext').classList.toggle("show");
}
// define all popup elements.
let popups = document.querySelectorAll('.popup');
// add listener to each popup element, which binds handler function to click event.
popups.forEach(
popup => popup.addEventListener('click', popItUp)
);
/*
// The arrow function above is equivalent to:
popups.forEach(function(popup){
popup.addEventListener('click', popItUp);
});
*/
.item {
width: 100px;
text-align: center;
display: block;
background-color: transparent;
border: 1px solid transparent;
margin: 80px 0 0 50px;
float: left;
}
.popup {
position: relative;
cursor: pointer;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popuptext.show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="item">
<div class="popup">
<span class="popuptext">Popup Message 1</span>
<p>Currently Booked</p>
</div>
</div>
<div class="item">
<div class="popup">
<span class="popuptext">Popup Message 2</span>
<p>Currently Booked</p>
</div>
</div>
<div class="item">
<div class="popup">
<span class="popuptext">Popup Message 3</span>
<p>Currently Booked</p>
</div>
</div>
There are likely some other layout issues with the CSS, but this might give you an idea of the JavaScript implementation.
For reference:
The id global attribute defines an identifier (ID) which must be unique in the whole document.
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target.
The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
Incidentally, I also notice that your query includes LIMIT 1, so the while loop will not iterate more than once. You may want to remove (or increase) that limit:
$query = "SELECT * FROM discount
WHERE consecutivedays <= DATEDIFF('$date2','$date1')
AND idbeach = '$idbeach'
ORDER BY consecutivedays desc;";
In HTML, the id attribute was designed to be unique in a document. document.getElementById() will always only return one element.
One way to solve your problem is to give each popup a unique id, and pass this id on to myFunction() so it knows which popup to display (I've removed all the in-between lines of code for the sake of brevity).
I assume your database records have some unique identifier along with name, dates, price, discount and column but since you haven't selected it in your current code I don't know for sure. If it doesn't, one alternative is to keep track of a unique counter yourself, such as $id here:
$id = 0;
while($row = $results->fetch_assoc()){
$id++;
Then you can send that $id value on to your function and your popup id attribute to help Javascript figure out what you want:
<div class="popup" onclick="myFunction('myPopup<?php echo $id; ?>')">
<span class="popuptext" id="myPopup<?php echo $id; ?>"><?php echo $message;?></span>
Your function should then be modified to understand that change:
function myFunction(elementId) {
var popup = document.getElementById(elementId);
popup.classList.toggle("show");
}
I am trying to display an overlay onto my radio button images. So far I can create a border for the selected image but I cannot get a background image to overlay in front. Here is my code:
HTML/AngularJS:
<div class="row">
<label class="col-sm-4" ng-repeat="size in sizes">
<input type="radio" name="radio_size" ng-model="$parent.currentSize" value="{{size.value}}" hidden/>
<img class="img-thumbnail" src="{{size.url}}">
<img class="overlay" src="images/greenCheck.png">
</label>
</div>
CSS:
input[type=radio]:checked ~ .img-thumbnail {
border: solid limegreen .3em;
position: relative;
opacity: 1;
}
.overlay {
position: absolute;
top:5%;
left:7%;
height: 15%;
background: url("images/greenCheck.png");
opacity: 1;
}
This is what I have currently:
Before I click on a radio button.
After I click on a radio button.
I want the check marks to only appear when selected.
Set the opacity for the overlay to 1, when the radio is checked:
input[type=radio]:checked ~ .img-thumbnail {
border: solid limegreen .3em;
position: relative;
opacity: 1;
}
.overlay {
position: absolute;
top:5%;
left:7%;
height: 15%;
background: url("images/greenCheck.png");
opacity: 0;
}
input[type=radio]:checked ~ .img-thumbnail + .overlay {
opacity: 1;
}
This makes for a great possibility to make a transition for the checkmark to fade in, adding a transition to the .overlay, as the overlay is already in place just hidden, and when adding opacity: 1; the checkmark will fade in, if there is specified a transition.
All you need to do is add the input[type=radio]:checked selector to your .overlay too, i.e.:
input[type=radio]:checked ~ .img-thumbnail {
border: solid limegreen .3em;
position: relative;
opacity: 1;
}
/* .overlay { */ // <- change this....
input[type=radio]:checked ~ .overlay { // <- ...to this
position: absolute;
top:5%;
left:7%;
height: 15%;
background: url("images/greenCheck.png");
opacity: 1;
}
With your current code, you are displaying the overlay all the time, not just on selected images.
Edit: You don't need to include the image here - you already include it in your CSS so its included twice.
<div class="row">
<label class="col-sm-4" ng-repeat="size in sizes">
<input type="radio" name="radio_size" ng-model="$parent.currentSize" value="{{size.value}}" hidden/>
<img class="img-thumbnail" src="{{size.url}}">
<span class="overlay"></span>
</label>
</div>
my css:
label > input{
visibility: hidden;
position: absolute;
}
label > input + img{
cursor:pointer;
border:2px solid transparent;
}
label > input:checked + img{
border:2px solid #f00;
}
I am trying to make popups containing list of lines:
Support
Contact
Demo
In the 1st line, it should display Support. In the 2nd line, it should display Contact and in the 3rd line, it should display Demo.
I was able to create popups containing one line by following the w3schools link http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup but I am not sure how to create popups having multiple lines.
The pictorial representation of what I am trying to get is shown here:
The code which I have used from the w3schools link is shown below:
<!DOCTYPE html> <html> <style> /* Popup container - can be anything you want */ .popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
/* The actual popup */ .popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px; }
/* Popup arrow */ .popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent; }
/* Toggle this class - hide and show the popup */ .popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s; }
/* Add animation (fade in the popup) */ #-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;} }
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;} } </style> <body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">Support</span> </div>
<script> // When the user clicks on div, open the popup function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show'); } </script>
</body> </html>
In place of A Simple Popup, I have written Support. At this moment, I am able to get only one line as shown here:
As a quick try do these steps to design what you want
1- open you mentioned link
2- change the html code to :
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<div class="popuptext" id="div">
<div><span id="myPopup">Support</span><br/></div>
<div><span id="myPopup1">Contact</span><br/></div>
<div><span id="myPopup2">Demo</span><br/></div>
</div>
</div>
3- change myFunction() code block to :
var popup = document.getElementById('div');
popup.classList.toggle('show');
4- Add this css class to style element in head
.popup .popuptext div{
text-align: center;
background:#ad4747;
border-radius: 6px;
width: 160px;
margin-top:2px;
}
5- At the end run and see the result
but as you know there are several ways to design popup menu by front-end tools ,
but my solution is a quick design hope give you some help.
Additional helpful link