Modal Diaolog CSS Düzenleme Hk.

Merhabalar arkadaşlar.

Kendi çabalarım ile bir site geliştiriyorum. Desteğe ihtiyacım var. Bilgili ve müsait olan arkadaşlar göz atabilirse çok memnun olurum.

1. Modal dialog sayfası açıldığında, eğer içerik ekrandan uzun ise scroolbar görülmüyor. Özellikle mobil cihazlardan girildiğinde, içeriğin bir kısmı aşağı inilmediği için görülmüyor. (İçerik ekrandan uzunsa scrollbar eklemek istiyorum.)

2. Modal dialog sayfası açıldığın, X butonu ile kapatılıyor. Dialog sayfasının arkasında her hangi bir alana tıkladığında kapanmıyor. İlla X'e basmak gerekiyor. Bu kullanıcılar için uğraştırıcı. (Modal dialog sayfasını, ekranda boş bir yere tıklayınca da kapatmak istiyorum.)

CSS kodu şu şekildedir.

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    display: none;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}
.modalDialog > div {
    max-width: 400px;
    width: 90%;
    position: relative;
    margin: 5% auto;
    padding: 15px 15px 15px 15px;
    background: #fff;
}

Yardımcı olacak arkaadaşlara şimdiden teşekkür ederim.

Modal ın arkasında overlay kullanıyorsanız click eventına onuda atayım

@Tubazy;

Kullandığım bir modal var git sayfasını veriyorum bir incele istediklerini karşılıyor gibi gözüküyor.

Modal

Teşekkürler arkadaşlar.

İçerik taştı scroll yok denince akla ilk gelecek css kodu ---> overflow(overflow-x ve -y parçalarına ayrılır), bunu scroll yapacaksın

Karanlık bölgeye tıkladım kapanmıyor ---> Karanlık bölgeye click event'i atayıp modal div ve ikisini kaybettireceksin.

Sadece CSS ile karanlık bölge yaratılabilir ve kapattırılabilinir, o da benim uzmanlığım bana kalsın ama mümkünlüğünü bildiriyorum.

https://codepen.io/CemaLi/full/NaRboL/
Bu tarz birşey yapmaya çalışıyorusunuz sanırım.