Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
CSS

How to open another modal in modal with Bootstrap?

Labrador retriever puppy walking on green grass

Sometimes, we want to open another modal in modal with Bootstrap.

In this article, we’ll look at how to open another modal in modal with Bootstrap.

How to open another modal in modal with Bootstrap?

To open another modal in modal with Bootstrap, we can set the z-index of the modals.

For instance, we write

<a data-bs-toggle="modal" href="#myModal" class="btn btn-primary">
  Launch modal
</a>

<div class="modal" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-hidden="true"
        ></button>
      </div>
      <div class="container"></div>
      <div class="modal-body">
        Content for the dialog / modal goes here.
        <a data-bs-toggle="modal" href="#myModal2" class="btn btn-primary"
          >Launch modal</a
        >
      </div>
      <div class="modal-footer">
        <a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark"
          >Close</a
        >
      </div>
    </div>
  </div>
</div>

<div class="modal" id="myModal2" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">2nd Modal title</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-hidden="true"
        ></button>
      </div>
      <div class="container"></div>
      <div class="modal-body">
        Content for the dialog / modal goes here. Content for the dialog / modal
        goes here.
      </div>
      <div class="modal-footer">
        <a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark"
          >Close</a
        >
        <a href="#" class="btn btn-primary">Save changes</a>
      </div>
    </div>
  </div>
</div>

to add the modals.

Then we set the z-index of the modals by writing

.modal:nth-of-type(even) {
  z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
  z-index: 1061 !important;
}

so the 2nd modal will show on top of the first one.

Conclusion

To open another modal in modal with Bootstrap, we can set the z-index of the modals.

Categories
JavaScript Answers

How to get a microtime in Node.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to get a microtime in Node.js.

In this article, we’ll look at how to get a microtime in Node.js.

How to get a microtime in Node.js?

To get a microtime in Node.js, we can use the process.hrtime method.

For instance, we write

const [seconds, nanoSeconds] = process.hrtime();
console.log(seconds * 1000000 + nanoSeconds / 1000);

to call process.hrtime to return an array with the current timestamp as an array with the seconds and nanoSeconds.

Then we use seconds * 1000000 + nanoSeconds / 1000 to convert seconds and nanoSeconds to microseconds and add them together.

Conclusion

To get a microtime in Node.js, we can use the process.hrtime method.

Categories
React Answers

How to display line breaks from saved text area with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to display line breaks from saved text area with React.

In this article, we’ll look at how to display line breaks from saved text area with React.

How to display line breaks from saved text area with React?

To display line breaks from saved text area with React, we set the white-space CSS style to pre-line.

For instance, we write

const Comp = () => {
  //...
  return (
    <>
      <style>{`
      #p-wrap {
        white-space: pre-line;
      }
    `}</style>
      <textarea value={address} />
      <p id="p-standard">{address}</p>
      <hr />
      <p id="p-wrap">{address}</p>
    </>
  );
};

to add the textarea and p elements.

We set the element with ID p-wrap to have the white-space style set to pre-line.

Then this p element will display all the line breaks that are entered into the textarea.

Conclusion

To display line breaks from saved text area with React, we set the white-space CSS style to pre-line.

Categories
JavaScript Answers

How to sort JavaScript array by two numeric fields?

Labrador retriever puppy walking on green grass

Sometimes, we want to sort JavaScript array by two numeric fields.

In this article, we’ll look at how to sort JavaScript array by two numeric fields.

How to sort JavaScript array by two numeric fields?

To sort JavaScript array by two numeric fields, we use the || operator.

For instance, we write

const sortedArr = grouperArray.sort((a, b) => {
  return a.gSize - b.gSize || a.glow - b.glow;
});

to call grouperArray.sort with a callback that sorts by the values of the gSize and glow properties in each entries a and b.

We sort by gSize first and then glow.

Conclusion

To sort JavaScript array by two numeric fields, we use the || operator.

Categories
JavaScript Answers

How to use a condition in switch case with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to use a condition in switch case with JavaScript.

In this article, we’ll look at how to use a condition in switch case with JavaScript.

How to use a condition in switch case with JavaScript?

To use a condition in switch case with JavaScript, we replace the switch statement with if statements.

For instance, we write

if (liCount === 0) {
  setLayoutState("start");
} else if (liCount <= 5) {
  setLayoutState("upload1Row");
} else if (liCount <= 10) {
  setLayoutState("upload2Rows");
}

to use if statements to check the value of liCount.

In each block, we call setLayoutState with various values according to the liCount value.

Conclusion

To use a condition in switch case with JavaScript, we replace the switch statement with if statements.