How to Show Popup Message Like in Stack Overflow

How do I display a alert on a website?

It looks like you have tagged 'javascript' on this question, so I will show you the most common way to do it completely using javascript.

Use the alert() function. The alert function takes one parameter — the text that you want to show. All browsers will present this in a different way. This is really easy to do and is recommended especially if you are just starting.

An example of implementing this on your HTML website:

<script type="text/javascript">
    alert('My message goes here');
</script>

If you want to change the way this looks, you will have to use an HTML modal. By using that, you can customize the HTML&CSS to look exactly like the picture you attached.

To get started with that, I recommend you check out W3Schools tutorial on this: https://www.w3schools.com/howto/howto_css_modals.asp

show popup at the middle of screen using javascript

Source

$(".open").click(function() {  if ($('#first_one').is(':visible')) {    document.getElementById('prev').style.display = 'none';    document.getElementById('next').style.display = 'inline';
  }});
$("#next").click(function() {  var $next = $(".text:visible").hide().next('p');  $next.length ? $next.show() : $(".text:first").show();});
$("#prev").click(function() {  var $next = $(".text:visible").hide().prev('p');  $next.length ? $next.show() : $(".text:last").show();});

$("#next").click(function() {  if ($('#fourth_one').is(':visible')) {    document.getElementById('next').style.display = 'none';  }});
$("#prev").click(function() {  if ($('#first_one').is(':visible')) {    document.getElementById('prev').style.display = 'none';  }
  if ($('#third_one').is(':visible')) {    document.getElementById('next').style.display = 'inline';  }});
$("#next").click(function() {  document.getElementById('prev').style.display = 'inline';});

var divClone = $(".text").clone();
$(".open").click(function() {  $(".text").replaceWith(divClone.clone());  $('.text').not(":first-child").hide();});
$(".close").click(function() {  $(".text").replaceWith(divClone);});

.open {  display: block;  background-color: #333;  color: #fefefe;  padding: 10px 6px;  border: none;  cursor: pointer;}
.modal {  display: none;}
.modal {  z-index: 3;  display: none;  padding-top: 100px;  position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100%;  overflow: auto;  background-color: rgb(0, 0, 0);  background-color: rgba(0, 0, 0, 0.4)}
.modal-content {  margin: auto;  background-color: #fff;  position: fixed;  top: 50%;  left: 0;  right: 0;  padding: 0;  outline: 0;  width: 600px}
.close {  display: block;  position: absolute;  right: 0;  top: 0;  border: none;  display: inline-block;  padding: 8px 16px;  vertical-align: middle;  overflow: hidden;  text-decoration: none;  color: inherit;  background-color: inherit;  text-align: center;  cursor: pointer;  white-space: nowrap;}
.close:hover {  color: #000;  background-color: #ccc;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button onclick="document.getElementById('id01').style.display='block'" class="open">Open Modal</button>
<div id="id01" class="modal">  <div class="modal-content">    <div class="modal-container" id="modal-container">      <span onclick="document.getElementById('id01').style.display='none'" class="close">×</span>      <span>Welcome to the modal</span>      <p class="text" id="first_one">Content 1</p>      <p class="text" id="second_one" style="display:none">Content 2</p>      <p class="text" id="third_one" style="display:none">Content 3</p>      <p class="text" id="fourth_one" style="display:none">Content 4</p>      <button id="prev">Prev</button>      <button id="next">Next</button>    </div>  </div></div>

I want to catch a popup message and get its text content

That is not the regular alert box that you could handle with driver.switchTo().alert();. It is just the HTML5 form validation which comes into action when you put "required" as the attribute of textfield and hence you cannot validate this with the help regular selenium code. But there is a workaround. Either you can use sikuli/autoit to check the presence of that tooltip message but remember, for different browsers, the tooltip look different. So either stick to one browser only or check for the driver that you are using and based on that check for that presence of image(tooltip) on the screen with sikuli/autoIt.

JavaScript alert message

Something like this maybe?

<html><body>
<input type="text" oncopy="myFunction()" value="Try to copy this text">
<script>function myFunction() {    alert('you tried to copy')}</script>
</body></html>

How to Show Popup Message Like in Stack Overflow

How do I display a alert on a website?

show popup at the middle of screen using javascript

I want to catch a popup message and get its text content

JavaScript alert message

Related Topics

Leave a reply