简体   繁体   中英

How to show a modal box from the server with NodeJs?

I have a website with a contact page. When the user fills the form and presses the button, I will catch the information in my post method and if there is nothing wrong, I want to show a modal box to the user on that contact page. This is what I did so far.

server.js

app.post("/contact", function (req, res) {
  var contactUsInfo = {
    firstName: req.body.firstname,
    lastName: req.body.lastname,
    email: req.body.email,
    regarding: req.body.regarding,
    message: req.body.message
  };

  if(sendEmail(contactUsInfo)){
    res.render("modal_success", { testing: "Hello" });
  }
});

contact.html

....
....

<input name = "submit_btn" type="submit" value="Submit" formaction="/contact" formmethod="POST"/>

modal box

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
               <% testing %>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

The modal box does appear but has no style whatsoever and the background is white with no formatting. I just started web development and a very big newbie. It would be nice if you could tell me whether this is the correct approach or not.

You can simply send response back to the frontend. Are you sending request to the backend with axios, fetch or something else?

You can catch the response with .then() and inside you can trigger the opening of the modal. I assume you're using Bootstrap modal so you can use this $('#myModal').modal('show') or you can refer to this link bootstrap modal methods

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM