如何使我的简单弹出式 Web 响应？

Question

Im new to coding and I am trying to create a simple popup, I want to be able to make this compatible for a mobile website, but I have tried doing a bunch of examples from W3 Schools to make it mobile friendly. I've had no luck in what I tried so I didn't include anything I tried in the code I posted here. Would someone be able to help me? thank you!

 $(function() { var overlay = $('<div id="overlay"></div>'); overlay.show(); overlay.appendTo(document.body); $('.popup').show(); $('.close').click(function() { $('.popup').hide(); overlay.appendTo(document.body).remove(); return false; }); $('.x').click(function() { $('.popup').hide(); overlay.appendTo(document.body).remove(); return false; }); });

 #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; z-index: 100; display: none; } .cnt223 a { text-decoration: none; } .popup { width: 100%; margin: 0 auto; display: none; position: fixed; z-index: 101; } .cnt223 { min-width: 600px; width: 600px; min-height: 150px; margin: 100px auto; background: #f3f3f3; position: relative; z-index: 103; padding: 15px 35px; border-radius: 5px; box-shadow: 0 2px 5px #000; } .cnt223 p { clear: both; color: #555555; /* text-align: justify; */ font-size: 20px; font-family: sans-serif; } .cnt223 pa { color: #d91900; font-weight: bold; } .cnt223 .x { float: right; height: 35px; left: 22px; position: relative; top: -25px; width: 34px; } .cnt223 .x:hover { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='popup'> <div class='cnt223'> <Center> <h1>POPUP!</h1> <p> <center> Body text Lores Ipsum........ <br> <br> <b> The next line down</b> <br/> <br/> <a href='' class='close'>Close</a> </p> </div> </div>

Answer 1

remove min-width and use max-width:600px instead of width inside .cnt223 class

.cnt223 {
 max-width: 600px;
 min-height: 150px;
 margin: 100px auto;
 background: #f3f3f3;
 position: relative;
 z-index: 103;
 padding: 15px 35px;
 border-radius: 5px; 
 box-shadow: 0 2px 5px #000;
}

In additonally I reccomend you read about Css media queries to hanlde different screen sizes and more flexible responsive design https://www.w3schools.com/css/css_rwd_mediaqueries.asp