0

I'm needing help with some JavaScript - I think. I can't find any tutorials for what I'm looking for. I've create HTML and CSS for a "Call Now!" button and am needing to figure out how to make it work when someone clicks on it the "call now" or "cancel" prompts show up and if they press "call now" it starts dialing the number...

a.phoneMe {
  position: fixed;
  right: 0px;
  bottom: 60px;
  left: 0px;
  margin-left: 50%;
  height: 53px;
  width: 80px;
  background: #228B22;
  color: white;
  text-decoration: none;
  font-size: 20px;
  text-align: center;
  border-radius: 5px;
}
<a href="tel:+15014737132" class="phoneMe">Call Now!</a>
j08691
  • 204,283
  • 31
  • 260
  • 272
emmalenn
  • 3
  • 1
  • 3
  • 3
    the `tel:` url should work, where is it not working? – Daniel A. White Sep 15 '17 at 13:25
  • 3
    thats all up to the browser to implement... – Daniel A. White Sep 15 '17 at 13:26
  • use `input type=tel` if you have skype browser plugin installed then it will be allowed to call – Niladri Sep 15 '17 at 13:26
  • Possible duplicate of [How to trigger a phone call when clicking a link in a web page on mobile phone](https://stackoverflow.com/questions/1608548/how-to-trigger-a-phone-call-when-clicking-a-link-in-a-web-page-on-mobile-phone) – Liam Sep 15 '17 at 13:32
  • Since this is a JavaScript question, please include the latest JavaScript code that you had attempted to use with this CSS. – JohnH Sep 15 '17 at 13:37

1 Answers1

1

EDIT: So, I think I misunderstood your question. I think what you are looking for is a modal.

Check out this fiddle: https://jsfiddle.net/7Lhx4zjh/

I'm using Jquery, and MaterializeCSS. To make this work in a document you need to setup your head to contain these links:

<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

And then you need to add this code into a script tag to initialize the modal:

$('document').ready(function(){
    $('.modal').modal();
})

There are other libraries (such as bootstrap) with modals, but materializecss is by far my favorite. It's super easy to use and great looking.

Robbie Milejczak
  • 5,664
  • 3
  • 32
  • 65