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


/* 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) Да и вообще нужно, чтобы я мог полностью задавать стиль окнам(их фон, цвет и прочее)

Можно 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>