用Javascript模式替换提示

Javascript modal to replace prompt?

本文关键字：提示 替换 模式 Javascript      更新时间：2023-09-26

更换的最佳方法是什么

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

通过javascript模式（最好是纯javascript，如果不可能，则使用jquery）

谢谢！

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

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

为了获得更好的警报，您可以使用bootboxjs。

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

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);
    });
}
相关文章：