JS overlay schließen?

ich habe eine Problem mit meiner schließungs-funktion.

$('#overlay-contact').on('click', function(ev) {
    console.log(ev.target)
    if (ev.Target = $('#overlay-wrapper-contact')) {
        $("#overlay-contact").removeClass('show-overlay');
    }
});

die Class 'show-overlay' wird durch einen Button hinzugefügt

$('#toggle-btn-contact').on('click', function(){
    var elem = $('#overlay-contact');
    elem.addClass("show-overlay");
});

<div id="overlay-contact" class="overlay">
  <div id="overlay-wrapper-contact" class="overlay-wrapper">
    <div class="o_contact-form">    
      <form action="index_submit" accept-charset="utf-8">
        <textarea placeholder="Name:" name="Name"></textarea>
        <textarea placeholder="E-Mail:" name="E-mail"></textarea>
        <textarea placeholder="Anliegen:"></textarea>
      </form>
    </div>  
  </div>
</div>

#overlay-contact.overlay
display: none
position: fixed
height: 100vh
width: 100vw
background: $bg-color
z-index: 999

.overlay-wrapper
   display: flex
   margin: auto
   background: red
   padding: 25px

#overlay-contact.show-overlay
   display: flex

   .overlay-wrapper
      animation: slide-down 0.5s ease

das Problem ist das wenn ich außerhalb clicke geht das overlay weg (wie es ja soll), aber wenn ich innerhalb clicke geht es auch weg :/

hier noch als CodePen für (hoffentlich) bessere Übersicht

https://codepen.io/Ezio__/pen/JNevya

hoffe einer kann helfen :)

2 Antworten

LeBonyt

21.05.2017, 14:13

Die CSS Datei wäre auch noch hilfreich. Und beschreibe das Problem etwas genauer.

Woher ich das weiß:Berufserfahrung – Web Developer bei einem mittelständischen Portalbetreiber

Ezio999999

Fragesteller

21.05.2017, 14:19

ok habe ich Vorschlag muss sich nur aktualisieren

Ezio999999

Fragesteller

21.05.2017, 15:00

oka CSS bzw Sass ist drin hab auch einen CodePen hinzugefügt wäre cool wenn du nochmal eine Blick drüber werfen könntest :)

Ezio999999

21.05.2017, 21:01

$('#overlay-contact').on('click', function(ev) {
    //console.log(ev.currentTarget)var overlay = document.getElementById("overlay-wrapper-contact")
    if ( overlay.contains(ev.target)) {
        console.log('insinde');
    } else {
        $("#overlay-contact").removeClass('show-overlay');
    }
});

Ezio999999

Fragesteller

21.05.2017, 21:05

bestimmt nicht die schönste Lösung, aber naja sie erfüllt wenigstens ihren zweg

btw. kann mir jemand erklären warum ich nur per document.getElementById die function .contains aufrufen kann und nicht einfach per $("#overlay-wrapper-contact") ?

Hallo,

ich habe in meiner Webseite ein Formular erstellt (Code ist hier eingefügt) und möchte, dass wenn man auf den <input> (submit) drückt, dass eine E-Mail versendet wird, an eine Adresse, die ich vllt. im HTML-Code angeben würde.

Geht das irgendwie?

Danke im Voraus!

<form style="margin-left: 3%; margin-right: 3%; padding-top: 20px;">
  <div class="form-group">
    <label>Vorname, Nachname</label>
    <input type="text" class="form-control" name="Name" placeholder="Ihr Name">
  </div>
  <div class="form-group">
    <label>E-Mail</label>
    <input type="email" class="form-control" name="E-Mail" placeholder="Ihre E-Mail">
  </div>
  <div class="form-group">
    <label>Betreff/Titel</label>
    <input type="text" class="form-control" name="Titel" placeholder="Titel">
  </div>
  <div class="form-group">
    <label>Anliegen</label>
    <textarea class="form-control" name="Anliegen" placeholder="Ihr Anliegen"></textarea>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="Button" value="Senden">
  </div>
</form>

...zur Frage

Wie erstelle ich ein dynamisches Kontaktformular?

Hallo, also ich habe bereits ein Kontaktformular erstellt das auch soweit gut funktioniert hierzu mein bisheriger Code:

    <?php
    if(isset($_POST["submit"])){
      mail("email@mail.com", "Kontaktformualr", 'Vorname: '.$_POST["vorname"].'Nachname: '.$_POST["nachname"].' Email: '.$_POST["email"].' Betreff: '.$_POST["subject"].' Nachricht: '.$_POST["message"]);
      ?>
      <h1 style="color: green;">Das Kontaktformular wurde abgesendet!</h1>
      <?php
    }
    ?>


    <form action="contact.php" method="post" class="service-contact-form">
      <input class="service-input-field" type="text" name="vorname" placeholder="Vorname*" required="required"><br>
      <input class="service-input-field" type="text" name="nachname" placeholder="Nachname*" required="required"><br>
      <input class="service-input-field" type="email" name="email" placeholder="Email*" required="required"><br>
      <input class="service-input-field" type="text" name="subject" placeholder="Betreff"><br>
      <textarea class="service-textarea-field" name="message" rows="8" cols="80" placeholder="Nachricht*" required="required"></textarea><br>
      <button class="service-contact-form-button" type="submit" name="submit">Senden</button>
    </form>

Das ist jetzt das normale Kontaktformular, allerdings würde ich gerne unterschiedliche Kontaktformulare mit einem <select> Element auswählen können.

    <div class="service-contact-form-select">
      <select>
        <option value="0">Support Anfrage</option>
        <option value="1">Bestellung</option>
      </select>
    </div>

Denn ich brauche bei der Supportanfrage wesentlich weniger Informationen wie bei dem Bestellformular.

Also was soll passieren?

Wenn ich bei <select> value="0" habe soll das Formular wie oben beschrieben aussehen.

Wenn ich aber bei <select> value="1" habe soll das Kontaktformular um weitere Elemente erweitert werden deren Informationen dann auch via php an meine e-mail übermittelt werden.

Kann mir hier jemand weiterhelfen?

...zur Frage

[HTML/CSS] Zwei Form Elemente nebeneinander in die Mitte des Bildschirms?

Hallo Leute, ich würde gerne meine beiden Input Elemente nebeneinander in die Mitte des Bildschirms haben. Habe schon versucht ein DIV außenrum zu erstellen und diesem text-align:center zu geben. Hat leider nicht geholfen.

Mein Code:

<div class="upperForm form-row">
  <div class="form-group">
    <label for="name1">Name</label>
    <input type="text" class="form-control main-input" id="name1" placeholder="">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control main-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
</div>

...zur Frage

Wie mache ich meine Suchleiste funktionsfähig (Blog)?

Hallo!

Ich habe mit HTML, CSS, JS und PHP einen Blog "geschrieben/programmiert", in dem eine Suchleiste eingebaut ist. Was muss ich tun, um diese funktionsfähig zu machen? Die Suchfunktion sollte meine MySQL Datenbank durchsuchen und dann die gefundenen Beiträge auf einer Seite auflisten.

Bis jetzt sieht der Code erst so aus:

<div class="section search">
 <h2 class="section-title">Search</h2>
 <form action="index.html" method="post">
    <input type="text" name="search-term" class="text-input" placeholder="Search...">
 </form>
</div>

So sieht die Suchleiste auf der Website aus:

Es wäre super, wenn mir jemand mit dem gesamten PHP Skript helfen könnte...

Danke ;)

...zur Frage

Webseite: Kennt sich jemand damit aus?

Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.

HTML-Code (Formular):

<div class="container">
      <div class="box">
		  <div class="scroll">
        <form action="" method="POST" class="login-email">
          <p class="login-text">Registrieren</p>
		<div class="profile-pic-div">
            <img src="img/default-pb.jpg" id="photo">
			<input type="file" id="file">
			<label for="file" id="uploadBtn">Profilbild Wählen</label>
          </div>
          <div class="input-group">
            <input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
          </div>
          <div class="input-group">
            <input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
          </div>
          <div class="input-group">
           <button name="submit" class="login-btn">Registrieren</button>
          </div>
          <p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
        </form>
			 </div>
      </div>
    </div>

Hier der Code zum Wechseln vom PB (JS):

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');


file.addEventListener('change', function() {
	const choosedFile = this.files[0];
	
	if (choosedFile) {
		
		const reader = new FileReader();
		
		reader.addEventListener('load', function() {
			img.setAttribute('src', reader.result);
		});
		
		reader.readAsDataURL(choosedFile);
	}
});

Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.

LG Klexxsy

...zur Frage

html Unterschrift in die pdf einfügen?

<div class="row">
 <div class="panel">
  <div class="panel-body">
   <div class="col-xs-12">
    <div class="form-group">
     <label for="Unterschrift_1"><b>Unterschrift Fachkraft für Arbeitssicherheit</b></label>
     <div class="wrapper">
      <canvas id="Unterschrift_1" width="700" height="100
      </canvas>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

...zur Frage

CSS in neue Zeile springen?

Hallo,

ich habe ein html Dokument in folgender Form:

<html>
<head>
</head>
<body>
    <div class="Class1">
        <h1 class=user_caption>Caption</h1>
        <section class="name_liste">
            <div class="name blau">
                <h3>hallo</h3>
            </div>
            <div class="name gelb">
                <h3>hallo1</h3>
        
            </div>
            <div class="name grün">
                <h3>hallo2</h3>
                
            </div>
            <div class="name rot">
                <h3>hallo3</h3>
                
            </div>
            <div class="name pink">
                <h3>hallo4</h3>
                
            </div>
            <div class="name weiß">
                <h3>hallo5</h3>
                <div></div>
            </div>
        </section>
</body>
</html>

nur so grob. ich möchte dass blau gelb und grün in einer reihe angezeigt werden und dann darunter rot pink und weiß. Ich habe schon probiert bei grün ein flex-wrap zu machen, aber egal wo ich den wrap versuche, nirgends klappt es. Habe schon überlegt ob es daran liegt, dass die seite faktisch genug platz hat, alle diese container in einer zeile anzuzeigen aber es ist doch irgendwie möglich, diese 6 elemente in 2x3 aufzuteilen.

habe als basis in css zumindest: name_liste { display: inline-flex }

MfG

...zur Frage

Warum funktioniert mein Text Decoration nicht?

CSS:

body{

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

margin: auto 0;

}

.nav{

background: rgb(0, 47, 255);

padding: 0.3em;

color: white;

text-decoration: none!important;

.contact{

text-decoration: none;

}

HTML:

<body>

XXX <span>XXX</span>

</div>

<a class="contact" href="#">Contact</a>

<a class="about-me" href="#">About Me</a>

<a class="projects" href="#">Projects</a>

</div>

</container>

<div>

Test

</div>

</container>

</body>

...zur Frage

HTML Form beim aktualisieren der Seite trägt sie die daten nochmal in die Datenbank ein, wie geht das weg?

Also ich hab eine Form in HTML und damit will ich sachen in einer SQL datenbank eintragen, funktioniert alles gut. Aber wenn ich die Seite aktualiesiere werden die eingeben Daten aus dem input nochmal in die Datenbank eingetragen. Wie kann ich das Wegmachen?

  <form class="tester" action="index.php" method="post">
                <?php include 'class_SQLAccount.php'; ?>


                <input class="AccountSystemAddInput" placeholder="Vorname" type="text" name="box_vorname">
                <input class="AccountSystemAddInput" placeholder="Nachname" type="text" name="box_nachname">
                <input class="AccountSystemAddInput" placeholder="Email" type="text" name="box_email">
                <input class="AccountSystemAddInput" placeholder="Passwort" type="text" name="box_password">
                <input class="AccountSystemAddInput" placeholder="Passwort wiederholen" type="text" name="box_retrypassword">
                <br>
                <input class="AccountSystemSubmit" type="submit" name="btn_AddUser" value="Hinzufügen">
                <p class="ErrorText"><?php print $var_errortext ?></p>
                <br>
              </form>

...zur Frage

HTML-Eingabefeld mit jQuery nur mit Zahlen zulassen?

Wie lässt sich in HTML-Eingabefeld mit jQuery nur numerisch (0-9) zulassen?

<div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label for="Bauherr_PLZ">PLZ</label>
                                                                <input type="text" class="form-control" maxlength="5" onKeyUp="zahl()" value="{if isset($values.Bauherr_PLZ)}{$values.Bauherr_PLZ}{/if}" name="Bauherr_PLZ" />
                                                            </div>
                                                            </div>

...zur Frage

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zur Frage

"textarea" html Feld mitwachsen?

<textarea class="form-control" name="Adresse">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Kann man dieses Feld so schreiben, dass es mitwächst. Das KEIN Scrollbalken kommt, sondern wie schon gesagt mitwächst

...zur Frage

[HTML] Checkboxes werden nicht angezeigt?

Die Checkboxes werden in Firefox nicht angezeigt, jedoch in Chrome.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="1" name="verhalten_freundlich">
  <label class="form-check-label" for="verhalten_freundlich">Freundlich</label>
</div>

...zur Frage

Symfony authentication funktioniert nicht?

Guten Tag,

für mein Symfony-Projekt habe ich beschlossen, das von Symfony miglieferter Security Bundle für die User-Authentifikation zu verwenden.

Ich habe mich nach folgenden Dokuemntationen durchgearbeitet:
https://symfony.com/doc/current/security.html
https://symfony.com/doc/current/security/form_login_setup.html
https://symfony.com/doc/current/testing.html#doctrine-fixtures

Hier meine Dateien:

SecurityController: https://hastebin.com/tiruyoteco.php

LoginAuth. https://hastebin.com/abewapanod.php

Dummy User: https://hastebin.com/epemuqihoz.php

Ich habe nun einen SecurityController, einen LoginFormAuthenticator, eine login.html.twig und eine security.yaml.

All diese Sachen sind auto_generiert und wurden von mir nicht verändert. Ferner habe ich einen dummy User angelegt, welcher den Benutzernamen "Test" und das Passwort "Test" hat.

Möchte ich mich jetzt testweise einloggen, lädt die Seite einfach neu, ohne dass ich einen Error oder einen Success bekomme.

Hier der Code der login.html.twig [2]

{% extends 'base.html.twig' %}

{% block title %}Log in!{% endblock %}
  {% block home %}active{% endblock %}
{% block stylesheets %}
    <link href="{{ asset("css/login.css") }}" rel="stylesheet">
{% endblock %}

{% block body %}

    <div class="container">
        <form class="text-light" method="post">
            {% if error %}
                <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
            {% endif %}

            {% if app.user %}
                <div class="mb-3">
                    You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
                </div>
            {% endif %}
            <h2 class="text-center mb-5">Login</h2>
            <div class="mb-3">
                <input type="text" class="form-control text-light form-control-lg " placeholder="Username" id="exampleInputEmail1" value="{{ last_username }}" name="username" aria-describedby="emailHelp" required>
            </div>
            <div class="mb-3">
                <input type="password" name="password" placeholder="Password" class="form-control text-light form-control-lg " id="exampleInputPassword1" required>
            </div>
            <div class="d-flex justify-content-between">
                <button type="submit" class="btn btn-outline-success">Einloggen</button>
                <a href="./register" class="btn btn-outline-primary">Registrieren</a>
            </div>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
        </form>
    </div>
{% endblock %}

meine Frage ist nun, an welchen Stellen ich nach dem fehler suchen soll oder ob ihr schon eine erkennt.

Vielen Dank.

mfg. Anton

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen