Отображение содержимого HTML сразу после входа в систему ASP. Net MVC

Question

Есть ли способ вызвать HTML из функции JS? Ниже приведен код ссылки: Метод входа в систему в ASP. Net MVC реализован следующим образом:

<div>
<button id = "btnSubmit" name ="btnSubmit" class="pop-submit" value="submit" type = "submit" onclick="loginl();">sign in </button>

 <script type="text/javescript">
 function loginl(){

   $("#inprogress").attr("style","display:block";height:50px;width:100%;");
   // HTML call to show message from here
   document.forms["formlogin"].submit();
   return true;
  }

 </script>

При щелчке входа в систему, то есть перед отправкой, я хотел бы реализовать кусок HTML:

Сообщение: Спасибо, что связались с нами. Посетите наш новый URL-адрес (здесь он будет go). Ниже приведены самые последние изменения:

• Item1
• Item2

Есть ли самый простой способ добиться этого? Я пытался использовать «Оповещение» или «Подсказку». Однако, похоже, здесь нет возможности включать HTML / CS HTML.

Вот как, я пытаюсь сделать:

 <script type="text/javescript">
 function loginl(){

   $("#inprogress").attr("style","display:block";height:50px;width:100%;");
   alert('message' + $(this).html("DiLogBox")); //can I not do something like this?
   document.forms["formlogin"].submit();
   return true;
  }

 </script>

Тогда мой HTML будет:

<div id = "DiLogBox">
......
</div>

Здесь нет проверки. Просто покажите сообщение. Пожалуйста помоги. Спасибо.

Answer 1

Я бы предположил, что вы действительно пытаетесь показать сообщение внутри модального окна. Здесь есть два варианта: Vanilla JS или использование какой-либо третьей стороны, например jQuery modal . Вот еще одна статья о том, как реализовать это с помощью Vanilla JS.

Затем вы можете добавить прослушиватель событий в форму и предотвратить его отправку, пока пользователь не закроет модальное окно.

Вот простой пример:

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

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

var showModal = function(){
  modal.style.display = "block";
}

var hideModal = function(){
  modal.style.display = "none";
}

//Prevent the form to submit
document.forms[0].addEventListener("submit", function(e){
  var form = this;
  e.preventDefault();
  showModal();
  span.addEventListener("click", function(){
    hideModal();
    form.submit();
    alert("form submitted");
  });
});

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<form>
  <label for="my-name">Name</label>
  <input id="my-name" type="text" />
  <button type="submit">Submit</button>
</form>
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

Answer 2

Ну, вы можете просто использовать всплывающее окно, чтобы помочь вам. Вот оно