Блог

Главная - Вопросы по программированию - Начальная загрузка Twitter — расположите большую всплывающую панель так, чтобы она закрывала центр экрана

Начальная загрузка Twitter — расположите большую всплывающую панель так, чтобы она закрывала центр экрана

#javascript #html #jquery #css #twitter-bootstrap

#javascript #HTML #jquery #css #twitter-начальная загрузка

Вопрос:

Допустим, у меня на моем сайте есть загрузочный всплывающий экран, например:

HTML:

 <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" 
data-content="Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here.">
</button>

Скрипты:

 $(function () {
    $('[data-toggle="popover"]').popover()
})

Однако, поскольку содержимое всплывающего окна будет довольно длинным, есть ли способ центрировать всплывающее окно на экране и изменить его размер, чтобы занять 75% общей площади экрана? Возможно, всплывающее окно не является правильным инструментом для этой работы, и в этом случае я был бы признателен за рекомендации по использованию лучших компонентов.

Ответ №1:

Я думаю, что лучшим компонентом для этого является модальный загрузчик

 $('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})  
 <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Modal example</title>
  </head>
  <body>
   
   
   
   <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
   
   

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>