మోడల్ తొలగించడం ఎలా చేయాలి
CSS ద్వారా డెలెట్ కనెఫిర్మేషన్ మోడల్ సృష్టించడం ఎలా నేర్చుకోండి.
బటన్ నొక్కడం ద్వారా మోడల్ తెరువుము:
×
డెలెట్ మోడల్ సృష్టించడం ఎలా చేయాలి
మొదటి చర్య - హ్ట్మ్ల్ జోడించండి:
మోడల్ తెరువుము మోడల్ × <form class="modal-content" action="/action_page.php"> <div class="container"> <h1>Delete Account</h1> <p>Are you sure you want to delete your account?</p> <div class="clearfix"> <button type="button" class="cancelbtn">Cancel</button> <button type="button" class="deletebtn">Delete</button> </div> </div> </form> </div>
第二步 - 添加 CSS:
* {box-sizing: border-box} /* 为所有按钮设置样式 */ button { background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; } button:hover { opacity:1; } /* 使取消和删除按钮浮动,并添加相等的宽度 */ .cancelbtn, .deletebtn { float: left; width: 50%; } /* 为取消按钮添加颜色 */ .cancelbtn { background-color: #ccc; color: black; } /* 为删除按钮添加颜色 */ .deletebtn { background-color: #f44336; } /* 为容器添加内边距并居中文本 */ .container { padding: 16px; text-align: center; } /* 模态(背景) */ .modal { display: none; /* 默认隐藏 */ position: fixed; /* 固定在原地 */ z-index: 1; /* 置于顶层 */ left: 0; top: 0; width: 100%; /* 全宽 */ height: 100%; /* 全高 */ overflow: auto; /* అవసరమైనప్పుడు స్క్రాల్ చేయడానికి చేర్చు */ background-color: #474e5d; padding-top: 50px; } /* మోడల్ కంటెంట్/బాక్స్ */ .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* పైకి 5%,క్రిందకి 15%,మరియు మధ్యకు 5% */ border: 1px solid #888; width: 80%; /* వెడల్పు అనుకూలంగా మరియు స్క్రీన్ పై మాత్రమే */ } /* హెరిటేజ్ లైన్ శైలిని అమర్చు */ hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } /* మోడల్ బాక్స్ మూసివేస్తున్న బటన్ను (x) */ .close { position: absolute; right: 35px; top: 15px; font-size: 40px; font-weight: bold; color: #f1f1f1; } .close:hover, .close:focus { color: #f44336; cursor: pointer; } /* Clear floats */ .clearfix::after { content: ""; clear: both; display: table; } /* చిన్న స్క్రీన్ పై రద్దు బటన్ను మరియు తొలగించు బటన్ను శైలిని మార్చు */ @media screen and (max-width: 300px) { .cancelbtn, .deletebtn { width: 100%; } }
అనుష్టుపం:మీరు మోడల్ బాక్స్ లోని విషయాన్ని క్లిక్ చేసినప్పుడు మోడల్ బాక్స్ ను మూసివేయడానికి కాకుండా క్లిక్ చేయవచ్చు (కేవలం "x" లేదా "రద్దు" బటన్ను క్లిక్ చేయడం ద్వారా మాత్రమే మూసివేయకూడదు):
ఉదాహరణ
<script> // మోడల్ బాక్స్ ను పొందండి var modal = document.getElementById('id01'); // వినియోగదారు మోడల్ బాక్స్ బాహ్య ఏ స్థానాన్ని క్లిక్ చేసినప్పుడు దానిని మూసివేస్తాము window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }