Замена стандартного модального окна

317

05 июня 2017, 21:49

/* Words for learn */ 
var wordsToLearn = ["Blackmail", "Coat", "Skirt", "Recent", "Whole", "Necessary", "Responsible", "Aunt", "Positive", "Efficient", "Familiar", "Frequent", "Convenient", "Opposite", "Suit", "Pass", "Raise", "Consider", "Rest", "Across", "Order", "Definitely", "Weary", "Data", "Native", "Heritage", "Destination", "Comprise", "Numerous", "Rather"]; 
 
/* Translation */ 
var translation = ["Шантаж", "Пальто", "Юбка", "Недавний", "Целый, весь", "Необходимо", "Ответственный", "Тетя", "Уверенный", "Эффективный", "Знакомые", "Частый", "Удобный", "Противоположный", "Костюм", "Сдавать,передача", "Поднять", "Рассматривать, считать", "Отдыхать", "Через,поперек", "Заказ,состояние", "Определенно", "Усталый", "Данные", "Родной", "Наследие", "Место назначениия", "Включать, охватывать", "Многочисленный", "Скорее"]; 
 
/* Cheack Answer */ 
function checkAnswer(){ 
	var i = 0; 
	do { 
		var answer = prompt("Enter the translation of the word: " + wordsToLearn[i], ""); 
		if (answer === translation[i]) { /* Right answer */ 
			alert("Right: " + wordsToLearn[i] + " - " + translation[i]); 
			 
		} 
 
		else if (answer === null || answer === undefined) { /* Answer = null or undefined */ 
			var cancel = confirm("Do you want to continue your test?"); 
				if (cancel != true) { 
					alert("Good Bye!"); 
					break; 
				} else { 
					i = i - 1; 
				} 
		} 
		 
		else  { /* Not right answer */ 
			alert("Not right: " + answer + ". Right: " + wordsToLearn[i] + " - " + translation[i] ); 
		} 
		i++; 
	   } 
	while (i<wordsToLearn.length); 
};

body { 
	margin: 0px; 
	padding: 0px; 
	background: url(images/fon.jpg) no-repeat; 
	width: 500px; 
	height: 600px; 
} 
 
/* Buttons */ 
#mainBlock { 
	margin-left: 50px; 
} 
 
.button { 
	position: absolute; 
	float: right; 
	width: 120px; 
	height: 30px; 
	cursor: pointer; 
	background-color: #F6F686; 
	border-radius: 6px; 
	border: none; 
} 
 
#startTest { 
	margin-top: 150px; 
} 
 
#addWords { 
	margin-top: 200px; 
} 
 
#editWords { 
	margin-top: 250px; 
} 
 
#resetList { 
	margin-top: 300px; 
} 
 
#mainBlock:active { 
	opacity: 0; 
}

<!DOCTYPE html> 
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
    <meta charset="utf-8" /> 
	<link href="LW_style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
	 
	 
	<div id="mainBlock">  
		<form> 
			<input type="button" value="Start test" id="startTest" class="button" onclick="checkAnswer()"> 
	<!--	<input type="button" value="Add words" id="addWords" class="button"> 
			<input type="button" value="Edit words" id="editWords" class="button"> 
			<input type="button" value="Reset List" id="resetList" class="button"> --> 
		</form> 
	</div> 
	 
<script src="LW_JS.js"></script>	 
</body> 
</html>

Всем привет. Я пытаюсь создать тест для изучения слов(в данном случае - английских). У меня при нажатии на "Start test" запускается модальное окно prompt, которое запрашивает перевод какого-либо слова. Далее alert выводит на экран правильно или неправильно написан перевод. Если нажать на отмену или ничего не ввести окно confirm выведет подтверждение о продолжении теста или о его завершении. Так вот, как можно сделать следующее:

1) Вместо стандартного "OK, отмена" окна prompt хотелось бы, чтобы было "ОК, пропустить, отмена".

2) Вместо "ОК, отмена" окна confirm нужно "Да, нет".

3) Да и вообще нужно, чтобы я мог полностью задавать стиль окнам(их фон, цвет и прочее)

Answer 1

Можно Bootbox с Bootstrap использовать

2) Вместо "ОК, отмена" окна confirm нужно "Да, нет".

http://bootboxjs.com/examples.html#bb-confirm-dialog

bootbox.confirm({ 
    message: "Выйти", 
    buttons: { 
        confirm: { 
            label: 'Да', 
            className: 'btn-success' 
        }, 
        cancel: { 
            label: 'Нет', 
            className: 'btn-danger' 
        } 
    }, 
    callback: function (result) { 
        if (result) 
        { 
          bootbox.alert('Вы выбрали Да.') 
         // ... 
        } 
    } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

1) Вместо стандартного "OK, отмена" окна prompt хотелось бы, чтобы было "ОК, пропустить, отмена".

http://bootboxjs.com/documentation.html#bb-custom-dialog

bootbox.dialog({ 
  title: 'A custom dialog', 
  message: ` 
      <input class="bootbox-input bootbox-input-time form-control"> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
        <button type="button" class="btn btn-warning">Cancel</button> 
      </div> 
  `, 
  closeButton: false 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

3) Да и вообще нужно, чтобы я мог полностью задавать стиль окнам(их фон, цвет и прочее)

http://getbootstrap.com/javascript/#modals

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
  Launch demo modal 
</button> 
 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
        ... 
      </div> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
        <button type="button" class="btn btn-warning">Cancel</button> 
      </div> 
    </div> 
  </div> 
</div>