Question

替换

的最佳方式是什么？

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

通过javascript模式（最好是纯javascript，如果不可能，那么jquery）

谢谢！

Answer 1

您需要更改调用它的方式，因此它现在遵循事件驱动的编程风格：

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

然后像这样使用它：

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

Answer 2

要获得更好的提醒，您可以使用bootboxjs。

对于纯JS模态，您可以检查与任何css类兼容的ModaliseJS。

ModaliseJS的示例（将类更改为您的设计，只需保留一个.close，.confirm和.cancel：

<!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);
    });
}

Javascript模式替换提示？

2 个答案: