My question is somewhat specific, but I would like to know if there is a possibility of creating a message of alert
with the default of the input required
?
The situation is this: I have a linked div that will forward to another content page, this content will not be available yet, but the div will be there. Instead of opening% default% wanted to know if there is a way to customize the function alert
to be displayed as simple as alert
.
UPDATING THE QUESTION WITH
required
With Tooltip
in javascript I was able to create a dialog bubble by clicking on the div, typing "Coming soon" .
Using the tooltip with tooltip
would like the balloon to disappear automatically after a few seconds, how to do it?
I found this example, but I can not apply it to my code → link
$(document).ready(function(){
$('.div_circulo_icon_image').tooltip({title: "Em breve", placement: "top", trigger: "click"});
});
.div_circulo{
position: relative;
margin: 50px;
height: 300px;
width: 300px;
border: 0;
}
.div_circulo_icon{
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 3px 3px 5px #555;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
-webkit-transition: 0.5s ease;
-moz-transition: 0.3s ease;
}
.div_circulo_icon:hover{
-webkit-transform:scale(1.05);
-moz-transform:scale(1.05);
-o-transform:scale(1.05);
transform:scale(1.05);
}
.div_circulo_icon_image{
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-position: center center;
background-image: url('https://static.pexels.com/photos/259264/pexels-photo-259264.png')
}
/*====================*/
.sentense {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 60px 0;
line-height: 1;
}
.sentense_spantitle {
width: 100%;
color: #d6b161;
opacity: 0.8;
display: block;
font-size: 26px;
font-weight: 500;
letter-spacing: 0.3px;
}
.sentense_text {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 30px 0;
}
.sentense_text::before {
background: #d6b161 none repeat scroll 0 0;
content: "";
position: absolute;
left: 50%;
top: 70%;
transform: translateX(-50%);
height: 1px;
width: 25%
}
.sentense_text__spantext{
color: #000;
opacity: 0.8;
display: block;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.3px;
line-height: 1.5px;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="div_circulo">
<div class="div_circulo_icon">
<a href="http://google.com/" class="div_circulo_icon_image">
<div class="div_circulo_icon_image"></div>
</a>
</div>
<div class="sentense">
<span class="sentense_spantitle">Tradidi</span>
</div>
<div class="sentense_text">
<span class="sentense_text__spantext"> quod et accepi </span>
</div>
</div>