Προς το περιεχόμενο

Pop up HTML

GriffonMarket

Από τον GriffonMarket
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

GriffonMarket Enthusiast

GriffonMarket

Δημοσ.
Δημοσ.

Προσπαθώ να βάλω στον ιστότοπό μου ένα Pop up ενημερωτικού δελτίου σε μορφή HTML και ενώ ανοίγει κανονικά το αναδυόμενο παράθυρο του pop up μόλις πάω να το κλείσω από το κουμπί (x) δεν κλείνει. παρακάτω είναι ο κώδικας html. Μπορώ να κάνω κάτι για αυτό; 

<!DOCTYPE html><html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
      maximum-scale=1, user-scalable=0">
    <title>Subscribe_popup</title>
    <style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
.welcome-popup-sec { margin: 30px auto; padding: 0; width:522px; position: relative; }
.welcome-popup-sec .welcome-content{ margin:0px; padding:0px; width:100%;color: #000; background:#fff; float:left;-webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);-moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52); }
.welcome-popup-sec .welcome-content .welcome-offer-sec{ background:url(images/welcome-popup-img.jpg) no-repeat top left; -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover; background-size: cover; float:left; width:100%;}
.welcome-popup-sec .welcome-content h2 {margin: 0px;font-family: 'Montserrat', sans-serif;text-align: left;font-size: 41px;text-transform: uppercase;}
.welcome-popup-sec .welcome-content h4 {padding: 0px;font-family: 'Montserrat', sans-serif;text-align: left;font-size: 14px;margin: 10px 0;line-height: 22px;width: 95%;}
.welcome-popup-sec .welcome-content h6{ background:#363636; color:#909090; font-family: 'Montserrat', sans-serif; font-size:12px;font-weight: 600; letter-spacing:0.6px; text-align:center; padding:25px 0; float:left; width:100%; margin:0;}
.welcome-popup-sec .welcome-content .welcome-offer-sec1 {float: left;width: 70%;padding-top: 50px;}
.welcome-popup-sec .welcome-content .welcome-offer-sec2 {float:left; width:28%;}
.welcome-offer-sec2 img {text-align: center;line-height: 20px;padding: 60px 30px;padding-bottom: 0;}
.welcome-popup-sec .welcome-content ul{ margin:0px; padding:50px 35px; width:100%; float:left; list-style:none; box-sizing: border-box;}
.welcome-popup-sec .welcome-content ul li{ margin:0px; padding:0; float:left; width:100%; box-sizing: border-box; position:relative;}
.welcome-popup-sec .welcome-content ul li input {border: solid 1px #3a3a3a;color: #000000;float: left;height: 56px;font-size: 14px;letter-spacing: 0.5px;padding: 20px 170px 20px 20px;width: 100%;text-transform: capitalize;box-sizing: border-box;}
.welcome-popup-sec .welcome-content ul li input:focus{ outline:none;}
.welcome-popup-sec .welcome-content ul li .welcome-submit-btn{ position:absolute; top:0px; right:0px; width:150px; font-family: 'Montserrat', sans-serif; font-weight:700; height:56px; border:0px; background:#00a651; color:#fff; font-size:15px; text-transform:capitalize; }
.welcome-popup-sec .welcome-cls-btn { font-size: 14px; line-height: 18px; width: 28px; height: 28px; -webkit-border-radius: 50%; border-radius: 50%; background: #FFF; position: absolute; right: -14px; top: -14px; border: 0px; -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.27); box-shadow: 0 0 2px 0 rgba(0,0,0,0.27); cursor: pointer; }
.welcome-popup-sec .welcome-cls-btn:hover {background: #363636;color: #fff;}
.popup-graybox {position: fixed;width: 100%;top: 0;left: 0;height: 100vh;z-index: 99999;align-items: center;display: flex;box-sizing: border-box;overflow: auto;}
    
@media only screen and (max-width:640px) {
.welcome-popup-sec{ width:80%; margin:0 auto;}
.welcome-popup-sec .welcome-content ul {padding: 20px 13px;}
.welcome-popup-sec .welcome-content .welcome-offer-sec2 {float: none;text-align: center;width: 100%;}
.welcome-popup-sec .welcome-content h4 {text-align: center;width: 100%;}
.welcome-popup-sec .welcome-content .welcome-offer-sec1 {float: none;width: 100%;padding-top: 0;}
.welcome-popup-sec .welcome-content h2 {text-align: center;font-size: 32px;}
.welcome-popup-sec .welcome-content ul li input {height: 48px;font-size: 12px;}
.welcome-popup-sec .welcome-content ul li .welcome-submit-btn {height: 48px;font-size: 13px; letter-spacing: 0.5px;}
.welcome-offer-sec2 img {width: 15%;line-height: 0;padding: 10px;}
.welcome-popup-sec .welcome-content h6 {padding: 20px 0;letter-spacing: 0;}
}
@media only screen and (max-width:480px) {
.welcome-popup-sec .welcome-content ul li input{ margin-bottom:10px; padding:0 20px; }
.welcome-popup-sec .welcome-content ul li .welcome-submit-btn{ position:inherit; width:100%;}
.welcome-popup-sec .welcome-content h4 {font-size: 12px;line-height:20px;}
.welcome-popup-sec .welcome-content ul li .welcome-submit-btn {height: 40px;}
.welcome-popup-sec .welcome-content ul li input {height: 40px;}
.welcome-popup-sec .welcome-content ul {padding-top: 0;}
}
@media only screen and (max-width:375px) {
.welcome-popup-sec { width: 90%; margin: 0 auto;}&#x09;
.welcome-popup-sec .welcome-content ul li input {height: 45px;font-size: 12px;}
.welcome-popup-sec .welcome-content ul li .welcome-submit-btn {height: 45px;font-size: 12px;letter-spacing: 0.5px;}
.welcome-popup-sec .welcome-content h6{ font-size:10px;}
.welcome-popup-sec .welcome-content ul{ padding: 10px 10px;}
}
</style>
  </head>
  <body>
    <section class="popup-graybox">
      <div class="welcome-popup-sec">
        <div class="welcome-content">
          <div class="welcome-offer-sec2" style="background: #fff;"> <img
              src="images/email_icon.png" alt=""> </div>
          <div class="welcome-offer-sec1" style="background: #fff;">
            <h2 data-edit="text">5€ κουπονι<br>
            </h2>
            <h4 data-edit="text">Με την εγγραφή σου στο Newsletter<span></span></h4>
          </div>
          <h6 data-edit="text">ΚΑΝΕ ΤΗΝ ΕΓΓΡΑΦΗ ΣΟΥ ΤΩΡΑ!<br>
          </h6>
        </div>
        <button class="welcome-cls-btn close-btn">X</button> </div>
    </section>
  </body>
</html>

 

GriffonMarket Enthusiast

GriffonMarket

Δημοσ.
  • Μέλος
Δημοσ.
9 λεπτά πριν, GriffonMarket είπε

Βάζω των HTML στην ιστοσελίδα και εμφανίζεται χωρίς να κάνω κάτι άλλο. Αλλά δεν κλείνει.

Πώς βάζω  javascript;

elpenor Experienced

elpenor

Δημοσ.
Δημοσ.
<!DOCTYPE html><html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
    maximum-scale=1, user-scalable=0">
    <title>Subscribe_popup</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
        .welcome-popup-sec { margin: 30px auto; padding: 0; width:522px; position: relative; }
        .welcome-popup-sec .welcome-content{ margin:0px; padding:0px; width:100%;color: #000; background:#fff; float:left;-webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);-moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52); }
        .welcome-popup-sec .welcome-content .welcome-offer-sec{ background:url(images/welcome-popup-img.jpg) no-repeat top left; -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover; background-size: cover; float:left; width:100%;}
        .welcome-popup-sec .welcome-content h2 {margin: 0px;font-family: 'Montserrat', sans-serif;text-align: left;font-size: 41px;text-transform: uppercase;}
        .welcome-popup-sec .welcome-content h4 {padding: 0px;font-family: 'Montserrat', sans-serif;text-align: left;font-size: 14px;margin: 10px 0;line-height: 22px;width: 95%;}
        .welcome-popup-sec .welcome-content h6{ background:#363636; color:#909090; font-family: 'Montserrat', sans-serif; font-size:12px;font-weight: 600; letter-spacing:0.6px; text-align:center; padding:25px 0; float:left; width:100%; margin:0;}
        .welcome-popup-sec .welcome-content .welcome-offer-sec1 {float: left;width: 70%;padding-top: 50px;}
        .welcome-popup-sec .welcome-content .welcome-offer-sec2 {float:left; width:28%;}
        .welcome-offer-sec2 img {text-align: center;line-height: 20px;padding: 60px 30px;padding-bottom: 0;}
        .welcome-popup-sec .welcome-content ul{ margin:0px; padding:50px 35px; width:100%; float:left; list-style:none; box-sizing: border-box;}
        .welcome-popup-sec .welcome-content ul li{ margin:0px; padding:0; float:left; width:100%; box-sizing: border-box; position:relative;}
        .welcome-popup-sec .welcome-content ul li input {border: solid 1px #3a3a3a;color: #000000;float: left;height: 56px;font-size: 14px;letter-spacing: 0.5px;padding: 20px 170px 20px 20px;width: 100%;text-transform: capitalize;box-sizing: border-box;}
        .welcome-popup-sec .welcome-content ul li input:focus{ outline:none;}
        .welcome-popup-sec .welcome-content ul li .welcome-submit-btn{ position:absolute; top:0px; right:0px; width:150px; font-family: 'Montserrat', sans-serif; font-weight:700; height:56px; border:0px; background:#00a651; color:#fff; font-size:15px; text-transform:capitalize; }
        .welcome-popup-sec .welcome-cls-btn { font-size: 14px; line-height: 18px; width: 28px; height: 28px; -webkit-border-radius: 50%; border-radius: 50%; background: #FFF; position: absolute; right: -14px; top: -14px; border: 0px; -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.27); box-shadow: 0 0 2px 0 rgba(0,0,0,0.27); cursor: pointer; }
        .welcome-popup-sec .welcome-cls-btn:hover {background: #363636;color: #fff;}
        .popup-graybox {position: fixed;width: 100%;top: 0;left: 0;height: 100vh;z-index: 99999;align-items: center;display: flex;box-sizing: border-box;overflow: auto;}
        
        @media only screen and (max-width:640px) {
            .welcome-popup-sec{ width:80%; margin:0 auto;}
            .welcome-popup-sec .welcome-content ul {padding: 20px 13px;}
            .welcome-popup-sec .welcome-content .welcome-offer-sec2 {float: none;text-align: center;width: 100%;}
            .welcome-popup-sec .welcome-content h4 {text-align: center;width: 100%;}
            .welcome-popup-sec .welcome-content .welcome-offer-sec1 {float: none;width: 100%;padding-top: 0;}
            .welcome-popup-sec .welcome-content h2 {text-align: center;font-size: 32px;}
            .welcome-popup-sec .welcome-content ul li input {height: 48px;font-size: 12px;}
            .welcome-popup-sec .welcome-content ul li .welcome-submit-btn {height: 48px;font-size: 13px; letter-spacing: 0.5px;}
            .welcome-offer-sec2 img {width: 15%;line-height: 0;padding: 10px;}
            .welcome-popup-sec .welcome-content h6 {padding: 20px 0;letter-spacing: 0;}
        }
        @media only screen and (max-width:480px) {
            .welcome-popup-sec .welcome-content ul li input{ margin-bottom:10px; padding:0 20px; }
            .welcome-popup-sec .welcome-content ul li .welcome-submit-btn{ position:inherit; width:100%;}
            .welcome-popup-sec .welcome-content h4 {font-size: 12px;line-height:20px;}
            .welcome-popup-sec .welcome-content ul li .welcome-submit-btn {height: 40px;}
            .welcome-popup-sec .welcome-content ul li input {height: 40px;}
            .welcome-popup-sec .welcome-content ul {padding-top: 0;}
        }
        @media only screen and (max-width:375px) {
            .welcome-popup-sec { width: 90%; margin: 0 auto;}
            .welcome-popup-sec .welcome-content ul li input {height: 45px;font-size: 12px;}
            .welcome-popup-sec .welcome-content ul li .welcome-submit-btn {height: 45px;font-size: 12px;letter-spacing: 0.5px;}
            .welcome-popup-sec .welcome-content h6{ font-size:10px;}
            .welcome-popup-sec .welcome-content ul{ padding: 10px 10px;}
        }
    </style>
</head>
<body>
    <section class="popup-graybox" id="popupwrapper">
        <div class="welcome-popup-sec">
            <div class="welcome-content">
                <div class="welcome-offer-sec2" style="background: #fff;"> <img
                    src="images/email_icon.png" alt=""> </div>
                    <div class="welcome-offer-sec1" style="background: #fff;">
                        <h2 data-edit="text">5€ κουπονι<br>
                        </h2>
                        <h4 data-edit="text">Με την εγγραφή σου στο Newsletter<span></span></h4>
                    </div>
                    <h6 data-edit="text">ΚΑΝΕ ΤΗΝ ΕΓΓΡΑΦΗ ΣΟΥ ΤΩΡΑ!<br>
                    </h6>
                </div>
                <button class="welcome-cls-btn close-btn"  onclick="closedabutton()">X</button> </div>
                <script>
                    function closedabutton() {
                      document.getElementById("popupwrapper").style.display = "none";
                    }
                    </script>
            </section>
        </body>
        </html>

Δεν με αφήνει να το κάνω edit να διορθώσω την μορφοποίηση και μου γράφει ότι έγινα block όταν δοκιμάζω να το βάλω σαν code. :-S

  • Like 1
GriffonMarket Enthusiast

GriffonMarket

Δημοσ.
  • Μέλος
Δημοσ.
11 λεπτά πριν, elpenor είπε
<!DOCTYPE html><html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
    maximum-scale=1, user-scalable=0">
    <title>Subscribe_popup</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
        .welcome-popup-sec { margin: 30px auto; padding: 0; width:522px; position: relative; }
        .welcome-popup-sec .welcome-content{ margin:0px; padding:0px; width:100%;color: #000; background:#fff; float:left;-webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);-moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52); }
        .welcome-popup-sec .welcome-content .welcome-offer-sec{ background:url(images/welcome-popup-img.jpg) no-repeat top left; -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover; background-size: cover; float:left; width:100%;}
        .welcome-popup-sec .welcome-content h2 {margin: 0px;font-family: 'Montserrat', sans-serif;text-align: left;font-size: 41px;text-transform: uppercase;}
        .welcome-popup-sec .welcome-content h4 {padding: 0px;font-family: 'Montserrat', sans-serif;text-align: left;font-size: 14px;margin: 10px 0;line-height: 22px;width: 95%;}
        .welcome-popup-sec .welcome-content h6{ background:#363636; color:#909090; font-family: 'Montserrat', sans-serif; font-size:12px;font-weight: 600; letter-spacing:0.6px; text-align:center; padding:25px 0; float:left; width:100%; margin:0;}
        .welcome-popup-sec .welcome-content .welcome-offer-sec1 {float: left;width: 70%;padding-top: 50px;}
        .welcome-popup-sec .welcome-content .welcome-offer-sec2 {float:left; width:28%;}
        .welcome-offer-sec2 img {text-align: center;line-height: 20px;padding: 60px 30px;padding-bottom: 0;}
        .welcome-popup-sec .welcome-content ul{ margin:0px; padding:50px 35px; width:100%; float:left; list-style:none; box-sizing: border-box;}
        .welcome-popup-sec .welcome-content ul li{ margin:0px; padding:0; float:left; width:100%; box-sizing: border-box; position:relative;}
        .welcome-popup-sec .welcome-content ul li input {border: solid 1px #3a3a3a;color: #000000;float: left;height: 56px;font-size: 14px;letter-spacing: 0.5px;padding: 20px 170px 20px 20px;width: 100%;text-transform: capitalize;box-sizing: border-box;}
        .welcome-popup-sec .welcome-content ul li input:focus{ outline:none;}
        .welcome-popup-sec .welcome-content ul li .welcome-submit-btn{ position:absolute; top:0px; right:0px; width:150px; font-family: 'Montserrat', sans-serif; font-weight:700; height:56px; border:0px; background:#00a651; color:#fff; font-size:15px; text-transform:capitalize; }
        .welcome-popup-sec .welcome-cls-btn { font-size: 14px; line-height: 18px; width: 28px; height: 28px; -webkit-border-radius: 50%; border-radius: 50%; background: #FFF; position: absolute; right: -14px; top: -14px; border: 0px; -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.27); box-shadow: 0 0 2px 0 rgba(0,0,0,0.27); cursor: pointer; }
        .welcome-popup-sec .welcome-cls-btn:hover {background: #363636;color: #fff;}
        .popup-graybox {position: fixed;width: 100%;top: 0;left: 0;height: 100vh;z-index: 99999;align-items: center;display: flex;box-sizing: border-box;overflow: auto;}
        
        @media only screen and (max-width:640px) {
            .welcome-popup-sec{ width:80%; margin:0 auto;}
            .welcome-popup-sec .welcome-content ul {padding: 20px 13px;}
            .welcome-popup-sec .welcome-content .welcome-offer-sec2 {float: none;text-align: center;width: 100%;}
            .welcome-popup-sec .welcome-content h4 {text-align: center;width: 100%;}
            .welcome-popup-sec .welcome-content .welcome-offer-sec1 {float: none;width: 100%;padding-top: 0;}
            .welcome-popup-sec .welcome-content h2 {text-align: center;font-size: 32px;}
            .welcome-popup-sec .welcome-content ul li input {height: 48px;font-size: 12px;}
            .welcome-popup-sec .welcome-content ul li .welcome-submit-btn {height: 48px;font-size: 13px; letter-spacing: 0.5px;}
            .welcome-offer-sec2 img {width: 15%;line-height: 0;padding: 10px;}
            .welcome-popup-sec .welcome-content h6 {padding: 20px 0;letter-spacing: 0;}
        }
        @media only screen and (max-width:480px) {
            .welcome-popup-sec .welcome-content ul li input{ margin-bottom:10px; padding:0 20px; }
            .welcome-popup-sec .welcome-content ul li .welcome-submit-btn{ position:inherit; width:100%;}
            .welcome-popup-sec .welcome-content h4 {font-size: 12px;line-height:20px;}
            .welcome-popup-sec .welcome-content ul li .welcome-submit-btn {height: 40px;}
            .welcome-popup-sec .welcome-content ul li input {height: 40px;}
            .welcome-popup-sec .welcome-content ul {padding-top: 0;}
        }
        @media only screen and (max-width:375px) {
            .welcome-popup-sec { width: 90%; margin: 0 auto;}
            .welcome-popup-sec .welcome-content ul li input {height: 45px;font-size: 12px;}
            .welcome-popup-sec .welcome-content ul li .welcome-submit-btn {height: 45px;font-size: 12px;letter-spacing: 0.5px;}
            .welcome-popup-sec .welcome-content h6{ font-size:10px;}
            .welcome-popup-sec .welcome-content ul{ padding: 10px 10px;}
        }
    </style>
</head>
<body>
    <section class="popup-graybox" id="popupwrapper">
        <div class="welcome-popup-sec">
            <div class="welcome-content">
                <div class="welcome-offer-sec2" style="background: #fff;"> <img
                    src="images/email_icon.png" alt=""> </div>
                    <div class="welcome-offer-sec1" style="background: #fff;">
                        <h2 data-edit="text">5€ κουπονι<br>
                        </h2>
                        <h4 data-edit="text">Με την εγγραφή σου στο Newsletter<span></span></h4>
                    </div>
                    <h6 data-edit="text">ΚΑΝΕ ΤΗΝ ΕΓΓΡΑΦΗ ΣΟΥ ΤΩΡΑ!<br>
                    </h6>
                </div>
                <button class="welcome-cls-btn close-btn"  onclick="closedabutton()">X</button> </div>
                <script>
                    function closedabutton() {
                      document.getElementById("popupwrapper").style.display = "none";
                    }
                    </script>
            </section>
        </body>
        </html>

Ευχαριστώ!

  • Like 1

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...