Category: CSS

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.

Sometimes, we want to change the mouse cursor on mouse over to anchor-like style with CSS.

In this article, we’ll look at how to change the mouse cursor on mouse over to anchor-like style with CSS.

How to change the mouse cursor on mouse over to anchor-like style with CSS?

To change the mouse cursor on mouse over to anchor-like style with CSS, we set the cursor style to pointer.

For instance, we write

#myDiv {
  cursor: pointer;
}

to set the cursor style of the element with ID myDiv to pointer so that when we move our mouse into the element, the pointer will show the hand icon that’s displayed for links by default.

Conclusion

To change the mouse cursor on mouse over to anchor-like style with CSS, we set the cursor style to pointer.

Sometimes, we want to hide a option in a select menu with CSS.

In this article, we’ll look at how to hide a option in a select menu with CSS.

How to hide a option in a select menu with CSS?

To hide a option in a select menu with CSS, we can add the hidden attribute to the option element we want to hide.

For instance, we write

<select>
  <option>Option1</option>
  <option>Option2</option>
  <option hidden>Hidden Option</option>
</select>

to hide the last option by adding the hidden attribute to the last option element.

Conclusion

To hide a option in a select menu with CSS, we can add the hidden attribute to the option element we want to hide.

Sometimes, we want to disable interpolation when scaling a canvas with CSS.

In this article, we’ll look at how to disable interpolation when scaling a canvas with CSS.

How to disable interpolation when scaling a canvas with CSS?

To disable interpolation when scaling a canvas with CSS, we can set the image-rendering style to pixelated.

For instance, we write

canvas {
  image-rendering: pixelated;
}

to select the canvas and set its image-rendering style to pixelated to disable interpolation on the canvas when scaling.

Conclusion

To disable interpolation when scaling a canvas with CSS, we can set the image-rendering style to pixelated.

Sometimes, we want to insert ellipsis (…) into HTML tag if content too wide with CSS.

In this article, we’ll look at how to insert ellipsis (…) into HTML tag if content too wide with CSS.

How to insert ellipsis (…) into HTML tag if content too wide with CSS?

To insert ellipsis (…) into HTML tag if content too wide with CSS, we can set a few CSS properties.

For instance, we write

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

to set the elements with class ellipsis to have various styles.

We set white-space to nowrap to stop text from wrapping.

overflow is set to hidden to hide overflowing text.

text-overflow is set to ellipsis to truncate overflowing text and add a ellipsis after the end of the truncated text.

The styles will be applied when the selected element has a set width.

Conclusion

To insert ellipsis (…) into HTML tag if content too wide with CSS, we can set a few CSS properties.