Есть ли способ сделать пользовательские кнопки во всплывающих окнах javascript? - PullRequest
Новая
       0

Есть ли способ сделать пользовательские кнопки во всплывающих окнах javascript?

0 голосов
/ 19 июня 2020

Есть ли способ сделать пользовательские кнопки во всплывающих окнах javascript? Я хочу создать всплывающие окна html и javascript. 

<script>alert("some message here");</script>

Это вызовет всплывающее сообщение. Есть только кнопка "ОК" или "Отмена", но как мне сделать так, чтобы я мог добавлять кнопки и запускал специальный сценарий c? Хочу добавить 2 скрипта. Назовем их просто button1() и button2(). Если на этот вопрос уже дан ответ, извините. Я действительно плохо разбираюсь в этом, и я нашел несколько, но все они дали 0 ответов.

Ответы [ 3 ]

0 голосов
/ 19 июня 2020

Вы можете создать собственное всплывающее окно, но без предупреждения. Для более красивого «предупреждения» есть библиотеки, подобные тем, которые упоминались в других сообщениях (sweet alert et c). Но вы сказали, что вам нужно специальное решение, поэтому я думаю, вам нужно просто создать div с нужными элементами (например, заголовком, сообщением и кнопками) и сохранить его скрытым. Затем сделайте его видимым, когда захотите, и примените стиль для внешнего вида и выравнивания. Вы можете увидеть простой пример в w3schools: https://www.w3schools.com/howto/howto_css_modals.asp

0 голосов
/ 19 июня 2020

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

Источник: https://www.w3schools.com/howto/howto_css_modals.asp

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* 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;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- 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>

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

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

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

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>
0 голосов
/ 19 июня 2020

Вы не можете изменять обычные alert или confirm диалоги, так как они зависят от браузера c.

Что вы можете сделать, так это использовать плагин для этого. Например, SweetAlert2 или Bootbox. js

Затем вы просто играете со стилями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...