Блог

Я сделал кнопку, которая при нажатии на нее переключает модальную кнопку с другой кнопкой (это меню опций). Все работает хорошо, я могу прокручивать модальный и переключать каждую кнопку в нем, когда я переключаю одну из кнопок в модальном, она открывает другой модальный (как и ожидалось), который дает вам небольшую обратную связь, и вы также можете нормально закрыть его без каких-либо проблем. Как только вы закрыли модальную обратную связь, вы больше не можете прокручивать нижнюю модальную… Вы все еще можете закрыть его и нажать все остальные кнопки, но вы больше не можете прокручивать его… Я не знаю, что случилось… Вот код: (html и css, я использовал bootstrap)

 <style>
/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    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/Box */

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}
/* The Close Button */

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Style buttons */

.btn {
    background-color: DodgerBlue;
    /* Blue background */
    border: none;
    /* Remove borders */
    color: white;
    /* White text */
    padding: 12px 16px;
    /* Some padding */
    font-size: 16px;
    /* Set a font size */
    cursor: pointer;
    /* Mouse pointer on hover */
}
/* Darker background on mouse-over */

.btn:hover {
    background-color: RoyalBlue;
}
 

 <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Dashboard Admin</title>

<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">

<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo 0N5UhStP3bvwWPq uvzCMfrN1fEFe xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="stylenav.css">
<link rel="stylesheet" href="w3.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="fa fa-cog"></i> Impostazioni</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Impostazioni</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 class="card border-dark mb-2">
                    <div class="card-body">
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Cambia email</button>
                        <p>Inserisci la nuova email e ti manderemo un link provvisorio per confermare la tua identità.</p>
                    </div>
                </div>
                <div class="card border-dark mb-2">
                    <div class="card-body text-dark">
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Cambia nome utente</button>
                        <p>Inserisci la tua email e ti manderemo un link provvisorio per confermare la tua identità.</p>
                    </div>
                </div>
                <div class="card border-dark mb-2">
                    <div class="card-body text-dark">
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Cambia password</button>
                        <p>Inserisci la tua email o nome utente e ti manderemo un link provvisorio per confermare la tua identità.</p>
                    </div>
                </div>
                <div class="card border-dark mb-2">
                    <div class="card-body text-dark">
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Rimuovi tutti i clienti</button>
                        <p>Inserisci la tua email per procedere con la conferma.</p>
                    </div>
                </div>
                <div class="card border-dark mb-2">
                    <div class="card-body text-dark">
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Elimina tutti gli appuntamenti</button>
                        <p>Inserisci la tua email per procedere con la conferma.</p>
                    </div>
                </div>
                <div class="card border-dark mb-2">
                    <div class="card-body text-dark">
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Elimina l’account</button>
                        <p>Inserisci la tua email per procedere con la conferma.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">amp;times;</span>
                </button>
                <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="#3bd10d" class="bi bi-check-circle" viewBox="0 0 16 16" style="outline:#3bd10d">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
                </svg>
                <h5>Fatto!</h5>
            </div>
        </div>
    </div>
</div>