I want to get the height of a specific element in modal

Asked 2 years ago, Updated 2 years ago, 122 views

Currently, I am creating a page for modal display using version 3.3.6 of modal.js.
This screen has a button, and when you click the button, a modal window appears.
Some modals are wrapped in <p>, and what you want to know is how to get the height of this element.

Currently, click event

takasa=$("p").height();

If you try to retrieve it as shown in , you get a zero.
Modal is initially display:none so no element found
I think the height is zero.

The current trend is

In the click event, I think the logic runs between 1 and 2, so
If you can run logic in 4 or later, you will probably be able to get the height.
I don't know how to do this at all...

javascript jquery bootstrap

2022-09-30 20:14

3 Answers

The answer is the same as @pgrho, but I will post a sample.
(I tried to add it as a comment, but I still didn't have enough permissions, so I posted it as an answer.)

$('#myModal').on('shown.bs.modal', function(e){
  vartakasa=$('p') .height()
  alert(takasa);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/>
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>
        content
        </p>
      </div>
    </div>
  </div>
</div>


2022-09-30 20:14

shown.bs.modalYou can use the event.

$('#myModal').on('shown.bs.modal', function(){
    // takasa=$("p").height();
});


2022-09-30 20:14

I don't know much about modal.js itself, so I'm sorry if it's wrong.
As far as I can see from the source below, I think I can pick it up at getOpenModals in modalmanager. What do you think?

https://github.com/jschr/bootstrap-modal


2022-09-30 20:14

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.