CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7030651
user7030651

Reputation:

JS : Show Pop up box position exactly above tr in table

I have a table with certain TRs. What I want is , when I click on any tr then a popup is opened. but I can't manipulate its position to the exact above tr on which it is clicked.

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("tr_1");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close_div")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
.container {
    margin-top: 10%
}

.container .m-t {
    margin-top: 15px
}

.container .m-t-xs {
    margin-top: 5px
}

.container .m-t-sm {
    margin-top: 10px
}

.container .cursor_pointer {
    cursor: pointer
}

.container .v-middle {
    vertical-align: middle
}

.container .table_div {
    border: thin red solid
}

.container .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.4)
}

.container .modal-content {
    background-color: #fefefe;
    margin: 0 30px;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
}

.container .modal-content .form-group label {
    font-size: 12px;
    font-weight: 300
}

.container .modal-content:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 10px #fff;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent
}

.container .close_div {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50px;
    border: thin white solid;
    top: -7px;
    right: -7px;
    text-align: center;
    background: #000000
}

.container .close_div span {
    color: white;
    position: absolute;
    left: 3px;
    top: -1px
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="CSS/style.css" type="text/css" rel="stylesheet">

  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="table_div table-responsive">
            <table class="table">
              <thead>
                <th>All</th>
                <th>Name</th>
                <th>Department</th>
              </thead>
              <tbody>
                <tr class="cursor_pointer" id="tr_1">
                  <td>
                    <input type="checkbox" name="">
                  </td>
                  <td>
                    Bradley Stephen
                  </td>
                  <td>
                    Sales
                  </td>
                </tr>

                <tr class="cursor_pointer">
                  <td>
                    <input type="checkbox" name="">
                  </td>
                  <td>
                    John Doe
                  </td>
                  <td>
                    Marketing
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="close_div cursor_pointer">
      <span>&#x2715;</span>
    </div>
    <div class="modal_body">
      <div class="form-group">
        <div class="row">
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
              <label>First Name</label>
              <input type="text" name="first_name" value="" class="form-control">
          </div>
        </div>

        <div class="row m-t">
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
              <label>Last Name</label>
              <input type="text" name="last_name" value="" class="form-control">
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <label for=""></label>
            <button type="button" name="button" class="m-t-xs">Update</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

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

  </body>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script type="text/javascript" src="JS/script.js">

  </script>
</html>

When I click on any of the tr , then a popup box should be above the respective tr with pointing the tr using bottom triangle.

I have searched a lot , but it could not work for me. Any help would be great. Thank You.

Upvotes: 0

Views: 1046

Answers (1)

PrashanthBR
PrashanthBR

Reputation: 183

Instead of modal, use bootstrap popover. Along with the explained content in the link, in the click function of tr, pass placement parameters to popover method like below:

$('tr').popover({
         content: //Your Html with textbox and button
         , container: 'body'
         , placement: 'auto top'
         , html: true
      });
$(selector).popover('show');

Update: Complete working html is given below, removed the entire bootstrap modal html and changed the placement to auto top. With 'AUTO' if there is no space above, the popover will be shown below.

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"></script>
   <title>Bootstrap Popover</title>
   <style>
      .container .table_div {
         border: thin red solid
      }

      header {
         padding-top: 160px;
      }
   </style>
   <script>
      $(document).ready(function () {
         var html = '<div class="form-group"><div class="row"><div class="col-lg-8 col-md-9 col-sm-9 col-xs-9"><label>First Name</label><input type="text" name="first_name" value="" class="form-control"></div></div><div class="row m-t"><div class="col-lg-8 col-md-9 col-sm-9 col-xs-9"><label>Last Name</label><input type="text" name="last_name" value="" class="form-control"></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><label for=""></label><button type="button" name="button" class="m-t-xs">Update</button></div></div></div>'
         $('tbody tr').attr({
            "data-toggle": 'popover'
            , "data-placement": 'auto top'
            , "data-trigger": 'click'
            , "data-html": 'true'
            , "title": function () {
               return $(this).children('td:nth-of-type(2)').html();
            }
            , "data-content": html
            , "data-container": 'body'
         });

         $('tbody tr').popover();
         $('tbody tr').on('show.bs.popover', function () {
            $('tbody tr').not(this).popover('hide');
         });
      });
   </script>
</head>

<body>
   <header></header>
   <div class="container">
      <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="table_div table-responsive">
               <table class="table">
                  <thead>
                     <th>All</th>
                     <th>Name</th>
                     <th>Department</th>
                  </thead>
                  <tbody>
                     <tr class="cursor_pointer" id="tr_1">
                        <td>
                           <input type="checkbox" name="">
                        </td>
                        <td>
                           Bradley Stephen
                        </td>
                        <td>
                           Sales
                        </td>
                     </tr>

                     <tr class="cursor_pointer">
                        <td>
                           <input type="checkbox" name="">
                        </td>
                        <td>
                           John Doe
                        </td>
                        <td>
                           Marketing
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</body>

</html>

Upvotes: 1

Related Questions