我希望我的模态在点击后消失

Question

我的项目中有一个模态，可以调用一个表单。

当我点击提交按钮时，我的模态再次出现，但我希望她消失 我的观点中的代码是：

{% if ad.id %}
    {% if ad.isOffer() %}
        {{ form_start(form) }}
        <div id="oModal" class="oModal">
            <div>
                <header>
                    <a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
                    <h2>{{ "MORE_INFORMATIONS"|trans }}</h2>
                </header>
                <section>
                    <div class="form-group">
                        <div class="col-md-4">
                            {{ "YOUR_PHONE_NUMBER"|trans }}
                            {{ form_errors(form.phone) }}
                            {{ form_widget(form.phone) }}
                        </div>
                        <div class="col-md-4">
                            {{ "WHEN"|trans }}
                            {{ form_errors(form.date) }}
                            {{ form_widget(form.date) }}
                        </div>
                        <div class="col-md-4">
                            {{ "AT_WHAT_TIME"|trans }}
                            {{ form_errors(form.hour) }}
                            {{ form_widget(form.hour) }}
                        </div>
                    </div>
                </section>
                <footer class="cf">
                    {{ form_widget(form.send, { 'attr': {'href': '#'} }) }}
                </footer>
            </div>
        </div>
        <div class="helper">
            <a href="#oModal">{{ "MORE_INFORMATIONS_PRODUCT"|trans }}</a>
        </div>
        {{ form_end(form) }}
    {% endif %}
{% endif %}

<script>
    var modal = document.getElementById('oModal');

    var span = document.getElementsByClassName("#")[0];
    span.onclick = function() {
        modal.style.display = "none";
    }

</script>

在我的少之内：

// Color variables (appears count calculates by raw css)
@color0: #e7e7e7; // Appears 3 times



.cf {
    &:before {
        content:"";
        display:table;
    }
    &:after {
        clear:both;
        content:"";
        display:table;
    }
}
.droite {
    float:right;
}
.oModal {
    -moz-transition: opacity 400ms ease-in;
    -webkit-transition: opacity 400ms ease-in;
    background: rgba(0, 0, 0, 0.8);
    bottom: 0;
    left: 0;
    opacity:0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 400ms ease-in;
    z-index: 99999;
        &:target {
            opacity:1;
            pointer-events: auto;
        }
        &:target>div {
            -moz-transition: all 0.4s ease-in-out;
            -webkit-transition: all 0.4s ease-in-out;
            margin: 10% auto;
            transition: all 0.4s ease-in-out;
        }
        .footer {
            border-radius: 0 0 5px 5px;
            border-top: 1px solid @color0;
            border:none;
        }

    }


.oModal>div {
        -moz-transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;
        background: #eeeeee;
        border-radius: 5px;
        margin: 1% auto;
        max-width: 800px;
        padding: 8px 8px 8px 8px;
        position: relative;
        transition: all 0.4s ease-in-out;
        header {
            border-bottom: 1px solid @color0;
            border-radius: 5px 5px 0 0;
        }

        footer {
            border-bottom: 1px solid @color0;
            border-radius: 5px 5px 0 0;
        }

        h2 {
            margin: 0;
        }

        .rappel {
            color: white;
            display: inline-block;
            font-family: Arial, sans-serif;
            font-size: medium;
            height: 50px;
            line-height: 40px;
            margin-right: 150px;
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            width: 200px;
        }

        section {
            padding: 30px;
        }
    }

.oModal>div>header {
    padding:30px;
}
.oModal>div>footer {
    padding:30px;
}
.helper>a {
        color: white;
        width: 100%;
    }

并在我的控制器中：

$formWrapper = new InfoModalFormWrapper();
        $form = $this->createForm(new InfoModalFormType(), $formWrapper);
        $form->handleRequest($request);

        if ($form->isValid()) {
            $this->sendMailInfoProduct($formWrapper);
            return $this->redirectToRoute('xxxx', [
                'slug' => $ad->getSlug()
            ]);
        }


        return $this->render('xxxx.html.twig', [
            'ad' => $ad,
            'commission' => $commission,
            'relatedAds' => $this->get('xxxx')->getRelatedAds($ad),
            'form' => $form->createView()
        ]);
    }


private function sendMailInfoProduct($formWrapper)
    {
        $message = \Swift_Message::newInstance()
            ->setSubject('Demande d\'informations sur un produit')
            ->setFrom(['xxx@xx.com' => 'xx'])
            ->setTo($this->get('xxx_config.manager.config')->findBySlug('email_admin')->getValue())
            ->setBody('Un utilisateur dont le numéro est'. " " . $formWrapper->phone ." ".'demande à être rappelé le'. " " .$formWrapper->date->format('d-m-Y'). " " .'à la période'. " " . $formWrapper->hour);
        $this->get('mailer')->send($message);
    }

和我的formwrapper：

Class InfoModalFormWrapper
{
    public $phone;
    public $date;
    public $hour;
}