如何设置div modal的关闭按钮？如何使关闭按钮功能在javascript中起作用？

时间：2018-07-23 07:48:00

标签： javascript html css

我已经在html，css和javascript的帮助下创建了电子邮件注册表格。我面临的问题是我已经包含了W3schools中的div模式代码。模态正常工作，但关闭按钮不起作用或未进行相应设置。有人可以帮我解决这个问题吗？我在过去3天内一直在努力解决此问题，但无法解决此问题。 This is the screenshot where the problem is coming? 

function formValidation() {

  var username = document.getElementById('username');
  var email = document.getElementById('email');
  var password = document.getElementById('password');
  var address = document.getElementById('address');
  var phoneno = document.getElementById('phoneno');

  // if(username.value.length == 0){
  //     document.getElementById('head').innerText = "* All fields are mandatory *";
  //     username.focus();
  //     return false;
  // }

  let statususername = validateUsername(username, "* Username should be in proper format. *");
  let statusemail = ValidateEmail(email, "* Email should be in proper format *");
  let statuspassword = validatePassword(password, "* Password should be in 7-10 characters with one word in capitalization and numerical digits should be there*");
  let statusaddress = alphanumeric(address, "*Address should be in proper format.*");
  let statusphone = allnumeric(phoneno, "*Phone no. should be in numbers only.*");

  console.log(statususername);
  console.log(statusemail);
  console.log(statuspassword);
  console.log(statusaddress);
  console.log(statusphone);

  if (statusFistName && statusLastName && statusClass && statusRollNo && statusEmail) return true;
  else return false;
}

function validateUsername(inputtext, alertMsg) {
  var alphabetsExp = /\W/;
  if (inputtext.value.match(alphabetsExp)) {
    document.getElementById('d1').innerText = '';
    return true
  } else {
    document.getElementById('p1').innerText = alertMsg;
    inputtext.focus();
    return false;

  }
}

function validatePassword(inputtext, alertMsg) {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if (myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }
  var upperCaseLetters = /[A-Z]/g;
  if (myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }
  // Validate numbers
  var numbers = /[0-9]/g;
  if (myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }
  // Validate length
  if (myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
  document.getElementById('d3').innerText = alertMsg;

  inputtext.focus();
  return false;

}

function allnumeric(inputtext, alertMsg) {
  var numeric = /^[0-9]+$/;
  if (inputtext.value.match(numeric)) {
    document.getElementById('d5').innerText = '';
    return true;
  } else {
    document.getElementById('d5').innerText = alertMsg;
    inputtext.focus();
    return false;
  }
}

function alphanumeric(inputtext, alertMsg) {
  var alpha = /^[0-9a-zA-Z]+$/;
  if (inputtext.value.match(alpha)) {
    document.getElementById('d4').innerText = '';
    return true;
  } else {
    document.getElementById('d4').innerText = alertMsg;
    inputtext.focus();
    return false;
  }
}

function ValidateEmail(inputtext, alertMsg) {
  var emailExp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (inputtext.value.match(emailExp)) {
    document.getElementById('d2').innerText = '';
    return true;
  } else {
    document.getElementById('d2').innerText = alertMsg;
    inputtext.focus();
    return false;
  }
}

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var button = document.getElementById('submit');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
function test() {
  var modal = document.getElementById('myModal');
  var mytext = document.getElementById('mytext');
  var span = document.getElementsByClassName("close")[0];
  modal.style.display = "block";
  modal.style.display = "none";
  // if (event.target == modal) {
  //     modal.style.display = "none";
  // }


  var username = document.getElementById('username');
  var email = document.getElementById('email');
  var password = document.getElementById('password');
  var address = document.getElementById('address');
  var phoneno = document.getElementById('phoneno');
  str = 'Hello ' + username.value + ', Your email address is ' + email.value + ', Your Email Address is successfully registered.';
  //document.getElementById('myModal').innerHTML = 'Username : ' + username.value + '<br>Email : ' + email.value + '<br>password : ' + password.value + '<br>Address : ' + address.value + '<br>Phone No. : ' + phoneno.value;
  mytext.innerHTML = str;
}

// function show() {

//     var username = document.getElementById('username');
//     var email = document.getElementById('email');
//     var password = document.getElementById('password');
//     var address = document.getElementById('address');
//     var phoneno = document.getElementById('phoneno');

//     // test validation
//     let isValidated = formValidation();
//     if (isValidated) {
//         console.log('Validation successful');
//         return str = 'Hello ' + username.value + email.value + ', Your email address is' + phoneno.value + ', You have successfully registered for this course';
//         document.getElementById('myModal').innerHTML = 'Username : ' + username.value + '<br>Email : ' + email.value + '<br>password : ' + password.value + '<br>Address : ' + address.value + '<br>Phone No. : ' + phoneno.value;
//     } else console.log('Verificatio failed');
// }
/* The Modal (background) */

.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%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-horizontal">
  <fieldset>
    <legend>
      <center>Email Registration Form</center>
    </legend>
    <div class="form-group">
      <label class="col-md-4 control-label" for="username">Username</label>
      <div class="col-md-4">
        <input id="username" name="username" type="text" placeholder="Username" class="form-control input-md" value="admin234">
        <p id="d1"></p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label" for="email">Email</label>
      <div class="col-md-4">
        <input id="email" name="email" type="email" placeholder="Email" class="form-control input-md" value="admin@gmail.com">
        <p id="d2"></p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label" for="password">Password</label>
      <div class="col-md-4">
        <input id="password" name="password" type="password" placeholder="Password" class="form-control input-md" value="abc123456">
        <p id="d3"></p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label" for="address">Address</label>
      <div class="col-md-4">
        <input id="address" name="address" type="text" placeholder="Address" class="form-control input-md" value="#822, Sector 7, Chandigarh.">
        <p id="d4"></p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label" for="phoneno">Phone No</label>
      <div class="col-md-4">
        <input id="phoneno" name="phoneno" type="text" placeholder="Phone No" class="form-control input-md" value="938322219">
        <p id="d5"></p>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label" for="submit"></label>
      <div class="col-md-4">
        <button id="submit" type="button" onclick="test()" name="submit" class="btn btn-success">Submit</button>
      </div>
    </div>
    </div>
    </div>
    </div>
    <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <p id="mytext"></p>
        <span class="close">&times;</span>
      </div>
    </div>
  </fieldset>
</form>

0 个答案:

没有答案
相关问题
最新问题