Is there a way to customize Function Alert equal to the input required?

Asked

Viewed 102 times

1

My question is somewhat specific, but I would like to know if there is a possibility to create a message from alert with the input pattern required?

The situation is as follows: 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 one alert pattern wanted to know if there is how to customize Function alert to be displayed in a simple way like the required.

UPDATING THE QUESTION WITH Tooltip

With the tooltip in javascript I was able to create a dialogue balloon by clicking on the div, writing "Soon".

Using the tooltip with trigger: "click" I would like the little balloon to disappear automatically after a few seconds, how to do?

I found this example, but I can’t apply it to my code https://jsfiddle.net/13k7nv4q/

	$(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>

<script src="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>

javascript css alert tooltip settimeout

  • you must be looking for jquery modal

  • https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal&stacked=h

  • @Marcosbrinner then Marcos I looked for any questions already asked around and found about the modals, but only found pop-ups styles like the one from w3s that you sent. It may be ignorance of mine, but I haven’t found any pattern to the dialog required :/

  • Face this is practically a Tooltip... When the guy clicks on the element Tooltip appears is what you need?

  • @hugocsl took a quick look, didn’t know Tooltip. Apparently that’s what I want, but already anticipating another question hehe: has how to personalize it?

  • Search for plugins that do this, is the easiest way.

  • Do you use Bootstrap? If not, use jQuery?

  • @vulgogandini Yes you can do the way you want there are a thousand options for this, What you have to think is When and How you will want to show this Tooltip. Do you want to click on the div to appear and disappear after a few seconds? You want it to appear always for now or only if some field is filled etc. It would be good you explain a little better so I can make a practical example for you. If it’s something simple only with CSS sometimes it solves.

  • @hugocsl I saw the options CSS Tooltip no w3s, but works on hover. I wanted you to display Tooltip when I clicked on the div and disappeared after a few seconds.

  • @hugocsl I added the tooltip to the code. But what I couldn’t do was make the balloon disappear after a few seconds. https://jsfiddle.net/c4wpuatf/

  • There is no way to change the visual properties of the Alert window. Nor how to implement a modification in the box Style. This is held exclusively by the browser. So if you want this you will have to give a Fork in an open browser and make your own implementation.

  • @I was actually chasing tooltip I just didn’t know him yet (:

  • Dude now you have to do a setTimeout to remove this Tooltipe, I even tried but as I am not good of JS the most I could was to make it work properly in the first click, but to work again have to click 2x :/

  • Actually what you are looking for would a Popover like this one not? https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h

  • @dvd updated the question...

  • @Leandro updated the question

  • @hugocsl then I updated the question and put an example that I found but could not apply to my code ;-;

  • No problem it seems that @dvd already solved, he is the guy from JS rss. tmj

  • @hugocsl thanks for the attention ლ( ڡ`ლ)

Show 14 more comments

1 answer

1


Use the callback of the tool with shown.bs.tooltip. After the tooltip is displayed, you can set a time in milliseconds with setTimeout to hide the same:

$(document).on('shown.bs.tooltip', function(e){
   setTimeout(function () {
      $(e.target).tooltip('hide');
   }, 1000);
});

Behold:

I added onclick="event.preventDefault()" link to cancel the redirecting action.

$(document).ready(function(){
    $('.div_circulo_icon_image').tooltip(
      {title: "Em breve", placement: "top", trigger: "click"}
    );
});

$(document).on('shown.bs.tooltip', function(e){
   setTimeout(function () {
      $(e.target).tooltip('hide');
   }, 1000); // 1 segundo
});
.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>

<script src="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/" onclick="event.preventDefault()" 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>

Now, I noticed that the method works best with Bootstrap 4:

$(document).ready(function(){
    $('.div_circulo_icon_image').tooltip(
      {title: "Em breve", placement: "top", trigger: "click"}
    );
});

$(document).on('shown.bs.tooltip', function(e){
   setTimeout(function () {
      $(e.target).tooltip('hide');
   }, 1000);
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div class="div_circulo">

  <div class="div_circulo_icon">
   <a href="http://google.com/" onclick="event.preventDefault()" 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>

  • That’s exactly what I wanted! But just one remark... @hugocsl reported the same thing there in the comments, the first time it works right already on Monday we need to make two clicks. I actually thought it was because of hover, but it wasn’t...

  • ata, really with Bootstrap does not give the click bug. God pay you!! (:

Browser other questions tagged javascript css alert tooltip settimeout

You are not signed in. Login or sign up in order to post.