CODEWITHSUNDEEP
javascript
montrealmike
montrealmike

Reputation: 11631

Javascript modal to replace prompt?

What is the best way to replace

var value = prompt("Enter a URL", "http://www.google.com/");

by a javascript modal (preferably pure javascript, if not possible then jquery)

Thanks!

Upvotes: 0

Views: 4309

Answers (2)

Alexis Paques
Alexis Paques

Reputation: 1975

For better alerts, you can use bootboxjs.

For a pure JS modal, you can check ModaliseJS which is compatible with any css classes.

Example of ModaliseJS (change the classes to your design, just keep one .close, .confirm and .cancel as you please) : 

<!DOCTYPE html>
<html>
<head>
    <title>Modal example</title>
    <link href="../../dist/modalise.css" rel="stylesheet">
    <script src="../../dist/modalise.js" type="text/javascript">
    </script>
    <script src="app.js" type="text/javascript">
    </script>
</head>
<body>
    <h1>Example modal 1</h1><button id="openModal">Show the modal</button>
    <div class="mdl mdl-fadein" id="exampleModal">
        <div class="mdl-content mdl-slidein">
            <center>
                <div class="mdl-header mdl-band-primary">
                    <span class="close">X</span>
                    <h2>Example modal</h2>
                </div>
                <div class="mdl-body">
                    <h3>Content modal</h3>
                    input data: <input type="text" class="inputdata"><br>
                </div>
                <div class="mdl-footer mdl-band-primary">
                    <button class="confirm" onclick="return false">Do
                    thing</button><button class="cancel" onclick=
                    "return false">Cancel the thing</button>
                </div>
            </center>
        </div>
    </div>
</body>
</html>

Javascript : 

var myModal = {}

window.onload = function(){ 

  var btnOpen = document.getElementById('queryData'); // The button to open the modal
  // if btnsOpen is not given, you can simply use myModal.show()
  // Modalise(id, options);
  myModal = new Modalise('exampleModal', {
      btnsOpen : [btnOpen]
    })
    .attach()
    .on('onConfirm', function(){
      console.log(this.querySelector(".inputdata").value);
    });
}

Upvotes: 0

Tadeck
Tadeck

Reputation: 137390

You will need to change theway you call it, so it now follows event-driven programming style like that:

function prompt(question, callback) {
    // here build a modal/form and after form submit:
    callback(prompt_value);
}

And then use it like that:

prompt('Enter a URL:', function(result){
    // do something with the result:
    alert(result);
});

Upvotes: 1

Related Questions