i want javascript pop up in the center of page

Question

I am working on an Html website and I have popup code but it shows the top of the page but I want to show this in the center of the page with fade in and fadeout effect please help me how can I do this. Thanks

<script>function openModal(){
    $("#exampleModalLong").modal();
    setTimeout(function(){ $("#exampleModalLong").modal("hide"); }, 3000);
}</script>


<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
            <center>  <h1 class="modal-title" id="exampleModalLongTitle">The Janwari Group Of Companies</h1></center>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <center><h4>Description</h4></center>
            </div>

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

have u tried to add position: absolute to ur modal and then just to write top: 50%, left: 50%, transform: translate(-50%, -50%) — Alopwer, May 15 '20 at 20:00
@digisoft I think my answer below will help you. If so, please accept it as the answer :) — tfarmer4, May 15 '20 at 20:13

tfarmer4 · Accepted Answer · 2020-05-15T21:06:47.223

0

EDIT: Here is a working example using your code and adding the feature. This should show you what you are missing here.

Code Sandbox Example

Make sure to open the "browser" in a new window. The browser preview doesn't show the correct result for some reason.

edited May 15 '20 at 21:06

answered May 15 '20 at 20:03

tfarmer4

115
12

Brother, I don't know how to do this please can you modify my code, please – digisoft May 15 '20 at 20:13
brother your code is also working so far can you please tell me how can change color of the white background of this modal – digisoft May 15 '20 at 21:11
@digisoft just change the ```background-color``` css property on the ```.modal``` selector. ```.modal{background-color: [Your color here]}``` – tfarmer4 May 15 '20 at 21:13
@digisoft sorry. i meant the selector ```.modal-content``` – tfarmer4 May 15 '20 at 21:18
1

Thanks bro its working now like a charm as i want thank you so much for your help – digisoft May 15 '20 at 21:21

Logan Poynter · Answer 2 · 2020-05-15T20:38:39.227

Edit: Updated for fadein / fadeout with jQuery since I missed it in the OP.

You can center the modal using position:absolute. See this similar post and alter your CSS accordingly.

Example using jQuery for fadein / fadeout on the modal and centered with CSS

.modal {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".close").click(function() {
      $(".modal").fadeOut(3000);
    });
    $(".open").click(function() {
      $(".modal").fadeIn(3000);
    });
  });
</script>

<button type="button" class="open" data-dismiss="modal" aria-label="Open">Open
</button>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <center>
          <h1 class="modal-title" id="exampleModalLongTitle">The Janwari Group Of Companies</h1>
        </center>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
        <center>
          <h4>Description</h4>
        </center>
      </div>

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

brother your code is not working still its show on top without fade in fadeout — digisoft, May 15 '20 at 20:21
Updated for fadein/fadeout since I missed that in your OP. Makes use of jQuery and you just need to edit where you want your close/open buttons to go. — Logan Poynter, May 15 '20 at 20:39

i want javascript pop up in the center of page

2 Answers2