Как я могу сделать этот модальный упор?

Я ищу способ сделать этот модальный постоянным, как только он появится. Как он представлен здесь, пользователь может закрыть его простым щелчком вне div.Как я могу сделать этот модальный упор?

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Activate Modal with JavaScript</h2> 
 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    $(window).load(function(){ 
 
    $('#myModal').modal('show'); 
 
    }); 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

Есть ли способ блокировать эту модальность, так что все еще есть даже с помощью мыши вне его?

источник

2016-01-28 farhawa

Вы должны просто показать DIV с CSS, если вы не хотите, интерактивность с ним. – TylerH

Прошу прощения, несопоставим, это не глагол. Что вы имеете в виду? – TylerH

Oups, я имею в виду «исчезнуть» – farhawa

К «сохраняются модальный» (он же предотвратить скрытие) крючок в случае скрытия и вернуть ложь, чтобы предотвратить скрытие.

$("#myModal").on('hide.bs.modal', function() { 
    return false 
});

Вот пример полного кода.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Persistent Modal</h2> 
 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <h4 class="modal-title">My Persistent Modal</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>I'm here for good. Can't hide me.</p> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    $(window).load(function(){ 
 
    $('#myModal').modal('show'); 
 
    }); 
 
    
 
    $("#myModal").on('hide.bs.modal', function() { 
 
    return false 
 
    }); 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

Редактировать: Для того, чтобы скрыть модальность, переопределить реакцию на событие скрыть перед вызовом hide(). Эта функция выполняет следующую функцию. Вы можете выполнять функцию всякий раз, когда это необходимо (например, при нажатии кнопки).

function hideMyModal() { 
    $("#myModal").on('hide.bs.modal', function() { }); 
    $("#myModal").hide() 
}

источник

2016-01-28 17:35:29

сейчас, как удалить его позже? используя javascript? – farhawa

Я отредактирую свой ответ. –

Что-то вроде этого должно начаться. Вы можете возиться с различными значениями, такими как цвет, сроки и т.д.

html, body { 
 
    margin: 0; 
 
    background: #878787; 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
} 
 

 
.modal-content { 
 
    position: absolute; 
 
    top: 10px; 
 
    animation: modal 300ms linear; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    background: #fff; 
 
    width: 90%; 
 
    left: 10px; 
 
    box-shadow: 2px 2px 1px #5f5f5f; 
 
    opacity: 0; 
 
    animation-fill-mode: forwards; 
 
    animation-delay: 500ms; 
 
} 
 

 
@keyframes modal { 
 
    0% { opacity: 0; top: 0px} 
 
    5% { z-index: 2; } 
 
    100% { opacity: 1; z-index: 2; top: 10px} 
 
}

<div class="container"> 
 
    <h2>Activate Modal with JavaScript</h2> 
 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
     <div class="modal-dialog"> 
 
      <!-- Modal content--> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <h4 class="modal-title">Modal Header</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <p>Some text in the modal.</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

источник

2016-01-28 17:25:20 TylerH

Является ли код только ответом приемлемым?

BootstrapDialog.show({ 
 
    title: 'Modal Header', 
 
    message: 'Some text in the modal.', 
 
    closeByBackdrop: false // <- This prevents closing the dialog by clicking outside 
 
});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.js"></script>

Больше примеров смотрите здесь http://nakupanda.github.io/bootstrap3-dialog/

источник

2016-02-01 10:27:22 badboy

Как я могу сделать этот модальный упор?

ответ

Смежные вопросы