js pop up dialog mode summary

  • 2020-11-18 05:16:15
  • OfStack

The example of this paper summarizes the js pop-up dialog mode. To share for your reference, the details are as follows:

alert prompt confirm3 dialog boxes are commonly used

Example 1:


<html>
<head>
<title>Example  Simple dialog box </title>
</head>
<body>
<script type="text/JavaScript">
<!--
alert("Good Morning!"); 
//alert We only accept 1 Three parameters. This parameter is theta 1 A string of, alert All you have to do is add this string 
// Just as it was 1 A prompt box is returned to the user, and we've seen this usage many times before 
alert("Hello, "+ prompt("What's your name?")+ "!");
//prompt is 1 The query box that it generates 1 A query input window, while waiting for the user input results 
// To continue the following program, when the user has finished typing, click OK, it will return the input string 
// If the user clicks the cancel button, it returns null
if(confirm("Are you ok?"))
//confirm is 1 It generates a confirmation box 1 a Yes|No Confirmation prompt box if answered Yes , it returns true
// If you answer No , it returns false
alert("Greate! ");
else
alert("Oh, what's wrong?");
-->
</script>
</body>

You can also define your own new window simulation dialog box

Example 2:


<html>
<head>
<title>Example Simulation dialog box </title>
</head>
<body>
<button onclick="opennew()"> Open the </button>
<script type="text/JavaScript">
<!--
function opennew(){
//doucment.createElement It can be used to construct new ones DOM object 
var w=document.createElement("div");
// The following 1 group style Property controls the style of the simulation window 
//DOM To provide the style Attributes can be conveniently made JavaScript Controls how elements are presented 
w.style.top=50;
w.style.left=50;
w.style.height=100;
w.style.width=300;
w.style.position="absolute";
w.style.background="#00ffff";
w.style.paddingTop = 10;
// through appendChild() Method will be created div Element object added to body Go to 
w.innerHTML+=("<center>I&nbsp;D&nbsp;:<input><br> password :<input><br></center>");
document.body.appendChild(w);
}
-->
</script>
</body>
</html>

In addition, js's confirm-based confirmation cancellation dialog is also very common, summarized as follows:

1 species:

<a href="javascript:if(confirm(' Are you sure you want to delete this content ?'))location='http://www.google.com'"> The pop-up window </a>

Two:


<script language="JavaScript">
function delete_confirm(e) 
{
  if (event.srcElement.outerText == " delete ") 
  {
    event.returnValue = confirm(" The deletion is not recoverable. Are you sure you want to delete it? ");
  }
}
document.onclick = delete_confirm;
</script>
<a href="Delete.aspx" onClick="delete_confirm"> delete </a>

Three:


if(window.confirm(' Are you sure you want to cancel the deal? ')){
 //alert(" determine ");
 return true;
}else{
 //alert(" cancel ");
 return false;
}

Four:


<script language="JavaScript">
function delete_confirm() <!-- A method is called -->
{
  event.returnValue = confirm(" The deletion is not recoverable. Are you sure you want to delete it? ");
}
</script>

Attached: js Pop-up dialog box 3 ways Complete example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3 A usage example of a pop-up dialog </title>
<script language="javascript">
function ale()
{
  // There's basically nothing to say about this, it's just pop, right 1 A reminder dialog box 
  alert(" I'm sure you're using a demo right now 1");
}
function firm()
{
  // Take advantage of the value returned by the dialog   ( true  or  false ) 
  if(confirm(" Are you sure you want to switch to Feng Yifei's blog? "))
  {
    // If it is true  ", then turn the page thcjp.cnblogs.com
    location.href="https://www.ofstack.com/";
   }
  else
  {
   // Otherwise, it's clear, Herr 
   alert(" You press cancel, that's return false");
  }
}
function prom()
{
  var name=prompt(" Please enter your name ","");// Assign input to a variable  name  . 
  // The thing to notice here is, prompt There are two parameters, the first is the prompt, the second is the default value in the dialog box when it comes out 
  if(name)// If you return something 
  {
     alert(" Welcome you to: "+ name)
   }
}
</script>
</head>
<body>
<p> Dialog boxes are 3 Kind of </p>
<p>1 : Just a reminder that no changes can be made to the script; </p>
<p>2 : 1 Generally used to confirm, return  true  or  false  , so it can be used easily  ifelse judge  </p>
<p>3 : 1 A dialog box with input that returns a string filled in by the user, usually in a message book or forum input   insert UBB Format images  </p>
<p> Let's demonstrate them respectively: </p>
<p> demo 1 : remind   dialog </p>
<p>
 <input type="submit" name="Submit" value=" submit " onclick="ale()" />
</p>
<p> demo 2  : Confirmation dialog box  </p>
<p>
 <input type="submit" name="Submit2" value=" submit " onclick="firm()" />
</p>
<p> demo 3  : Asks the user for input and gives a result </p>
<p>
 <input type="submit" name="Submit3" value=" submit " onclick="prom()" />
</p>
</body>
</html>

I hope this article has been helpful in JavaScript programming.


Related articles: