Question

是否可以仅使用JavaScript制作带输入文本的弹出窗口？

我必须像提示一样创建一个弹出窗口

var email = prompt("Texts1", "Email");

        if(email === null ) {
            return;
        }
(...) //something get the value from email

我的问题是提示中的Texts1太长，窗口无法全部显示。我只能使用/更改JavaScript（HTML中没有任何东西！）。

Answer 1

为什么它必须只是javascript？如果您想要更好地控制弹出窗口的工作方式和外观，您可以创建一个简单的html对话框，并且只在必要时显示它。

您无法编辑本机javascript提示/警报的显示方式。

Answer 2

如果您确实需要使用弹出式窗口，可以使用\n打破这一行，这可能会对您有所帮助。但在我看来，你会对使用所谓的＆＃34;模态＆＃34;更满意。 Modal类似于弹出窗口，用HTML编写。您可以随时显示它。它只是简单的HTML，如：

<div id="modal-1">
    <form>
        <!-- your form input etc. -->
    </form>
</div>

你可以用CSS触发（例子是使用居中位置）：

#modal-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 250px;
    padding: 20px;
    display: none;
    z-index: 100;
}

如果您准备好了，只需修改事件回调中的document.getElementById('modal-2').style.display = 'block';即可触发所需的任何事件。

Answer 3

您可以创建一个hidden div，其中包含您要在某些事件中显示的文字，例如，如果电子邮件字段为空，则使用纯JavaScript，如：

修改

如果您无法更改html，则可以显示多重js警报，如

alert("Hello! This is the way to \n add line breaks to an alert box");

结束修改

＆＃13;
＆＃13;
var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { var x = document.forms["myForm"]["email"].value; if (x == "") { modal.style.display = "block"; } } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
＆＃13;
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; }
＆＃13;
<button id="myBtn">Open Modal</button>  <div id="myModal" class="modal">  <div class="modal-content"> <span class="close">×</span> <p>Email field is empty</p> </div> </div> <form name="myForm"> <input type="text" name="email"> </form>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助

Answer 4

这是不可能的。你需要html，但是你可以使它独立于网站内容：

function ask(question,callback){
  var container=document.createElement("div");
container.textContent=question;
var field=document.createElement("textarea");
container.appendChild(field);
var ok=document.createElement("button");
container.appendChild(ok);
ok.onclick=function(){
  callback(field.value);
};
document.body.appendChild(container);
return {container:container,field:field,ok:ok};
}

像这样使用：

window.onload=function(){
  //make shure the js is executed after the page is loaded completely
  var question=ask("whats your name?",function(name){
    alert(name);
  });

您可以添加自定义样式：

question.container.style.backgroundColor="red";

但是，这不同步为prompt（），因此需要回调。希望它有所帮助...

仅限弹出式Javascript

4 个答案: