Warum kann ich nicht auf meinem Overlay scrollen?

Question

Wenn ich auf dem Bildschirm scrolle, ist alles gut. Wenn ich auf meine Schaltfläche klicke, erscheint ein Overlay. Allerdings kann ich immer noch das div unter meinem Overlay scrollen, was ich will ist nur mein Overlay zu scrollen.

$('#addCustomerBtn').on('click', function() { 
 
    // window.location.href = "http://dev.rabbijet.com/crm/create.html"; 
 
    var modal = document.getElementById('myModal'); 
 
    modal.style.display = "block"; 
 
})

body { 
 
    overflow: auto; 
 
} 
 

 
.black { 
 
    height: 200px; 
 
    width: 800px; 
 
    background-color: black; 
 
} 
 

 
.gray { 
 
    height: 200px; 
 
    width: 800px; 
 
    background-color: gray; 
 
} 
 

 
.green { 
 
    height: 700px; 
 
    background-color: green; 
 
} 
 

 
.yellow { 
 
    height: 700px; 
 
    background-color: yellow; 
 
} 
 

 
#addCustomerBtn { 
 
    font-size: 14px; 
 
    width: 120px; 
 
    border: 1px solid #20ACB3; 
 
    background-color: #20ACB3; 
 
} 
 

 
#myModal { 
 
    display: none; 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 999; 
 
    /* Sit on top */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 100%; 
 
    /* Full height */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
} 
 

 
#create-form { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    background-color: #000; 
 
    width: 500px; 
 
    height: 1500px; 
 
    background-color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="btn btn-primary" id="addCustomerBtn">Click</div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
</div> 
 

 
<div id="myModal"> 
 
    <div id="create-form"> 
 
    <div class="green"></div> 
 
    <div class="yellow"></div> 
 
    </div> 
 
</div>

Answer 1

overflow-y: scroll; zu Ihrer modalen Klasse im CSS hinzufügen.

$('#addCustomerBtn').on('click', function() { 
 
    // window.location.href = "http://dev.rabbijet.com/crm/create.html"; 
 
    var modal = document.getElementById('myModal'); 
 
    modal.style.display = "block"; 
 
})

body { 
 
    overflow: auto; 
 
} 
 

 
.black { 
 
    height: 200px; 
 
    width: 800px; 
 
    background-color: black; 
 
} 
 

 
.gray { 
 
    height: 200px; 
 
    width: 800px; 
 
    background-color: gray; 
 
} 
 

 
.green { 
 
    height: 700px; 
 
    background-color: green; 
 
} 
 

 
.yellow { 
 
    height: 700px; 
 
    background-color: yellow; 
 
} 
 

 
#addCustomerBtn { 
 
    font-size: 14px; 
 
    width: 120px; 
 
    border: 1px solid #20ACB3; 
 
    background-color: #20ACB3; 
 
} 
 

 
#myModal { 
 
    display: none; 
 
    position: fixed; 
 
    overflow-y: scroll; 
 
    /* Stay in place */ 
 
    z-index: 999; 
 
    /* Sit on top */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 100%; 
 
    /* Full height */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
} 
 

 
#create-form { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    background-color: #000; 
 
    width: 500px; 
 
    height: 1500px; 
 
    background-color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="btn btn-primary" id="addCustomerBtn">Click</div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
</div> 
 

 
<div id="myModal"> 
 
    <div id="create-form"> 
 
    <div class="green"></div> 
 
    <div class="yellow"></div> 
 
    </div> 
 
</div>

Answer 2

Diese Antwort ist sehr rau, aber im Grunde, was Sie tun, ist Überlauf auf den Modal Behälter zu ermöglichen, und wenn die Taste Sie Überlauf geklickt wird nicht zulassen auf den übergeordneten Container. Wenn Sie das Modal schließen, vergessen Sie nicht, die Klasse .overflow-hidden aus dem Dokumentkörper zu entfernen. Wenn Sie jQuery verwenden, verwenden Sie auch. Es ist beliebt, weil es viele Dinge erleichtert, wie zum Beispiel Stile anwenden.

$('#addCustomerBtn').on('click', function() { 
 
    // window.location.href = "http://dev.rabbijet.com/crm/create.html"; 
 
    var modal = $('#myModal'); 
 
    modal.css('display','block'); 
 
    $(document.body).toggleClass('overflow-hidden'); 
 

 
})

body { 
 
    overflow: auto; 
 
} 
 
.overflow-hidden { 
 
    overflow: none; 
 
} 
 
.black { 
 
    height: 200px; 
 
    width: 800px; 
 
    background-color: black; 
 
} 
 
.gray { 
 
    height: 200px; 
 
    width: 800px; 
 
    background-color: gray; 
 
} 
 
.green { 
 
    height: 700px; 
 
    background-color: green; 
 
} 
 
.yellow { 
 
    height: 700px; 
 
    background-color: yellow; 
 
} 
 
#addCustomerBtn { 
 
    font-size: 14px; 
 
    width: 120px; 
 
    border: 1px solid #20ACB3; 
 
    background-color: #20ACB3; 
 
} 
 
#myModal { 
 
    display: none; 
 
    position: absolute; 
 
    /* Stay in place */ 
 
    z-index: 999; 
 
    /* Sit on top */ 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    /* Full width */ 
 
    right: 0; 
 
    /* Full height */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    overflow: auto; 
 
} 
 
#create-form { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    background-color: #000; 
 
    width: 500px; 
 
    height: 1500px; 
 
    background-color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="btn btn-primary" id="addCustomerBtn">Click</div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
    <div class="black"></div> 
 
    <div class="gray"></div> 
 
</div> 
 

 
<div id="myModal"> 
 
    <div class="close-button">X</div> 
 
    <div id="create-form"> 
 
    <div class="green"></div> 
 
    <div class="yellow"></div> 
 
    </div> 
 
</div>