Hướng dẫn modal react-bootstrap - modal react-bootstrap

Question

Nội dung chính Show

I. Tổng quan về Modals
II. Cài đặt
III. Các cách sử dụng Modal
V. Kết luận

Đã đăng vào May 31st, 12:45 p.m. 2 phút đọc 2 phút đọc

I. Tổng quan về Modals

Modal là một meta component của bootstrap hỗ trợ tạo một popup có nội dung và các action được customize như một page thông thường.
Modal được sử dụng rất dễ dàng với cấu trúc các tag trong thư bootstrap.

II. Cài đặt

Modal là một component của bootstrap, vì vậy để sử dụng Modal chỉ cần cài đặt

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

0

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

0 được cài đặt rất dễ dàng bằng câu lệnh

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

2 hoặc thêm vào file

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

3 thư viện:

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

trước khi chạy câu lệnh

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

4

1. Một ví dụ đơn giản nhất về Modal:

Sử dụng thẻ

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

5 và các thẻ con với cấu trúc:

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

Cần khai báo một giá trị state

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

6 trong hàm khởi tạo để điều khiển việc đóng mở của modal:

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

Cần tạo 2 action

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

7 và

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

8 để thực hiện đóng và mở

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

9:

close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }

Tạo button để mở modal từ trang gốc:

<Button onClick={this.open} >
    Launch demo modal
Button>

Như vậy là ta đã tạo được một modal đơn giản nhất với bố cục đầy đủ 3 phần. Tiếp theo ta sẽ tìm hiểu cách tạo một modal phức tạp hơn.

2. Customize modal bằng css:

Ta có thể tạo modal nằm trong một frame bằng cách custom css như sau:

.modal-container {
  position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
  position: absolute;
}

Với

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

0 là class của một thẻ

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

1 bao ngoài

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

2 mà ta muốn đóng khung.

Ta cũng có thể chỉnh size cho

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

2 bằng thuộc tính

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

4 với các giá trị

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

5,

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

6,

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

7,

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

8 hoặc theo size custom bằng thuộc tính

constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
  }

9.

Nội dung của modal được tạo ra như một page thông thường.

V. Kết luận

Trên đây là những ví dụ cơ bản nhất trong việc sử dụng Modal của

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

0 để tạo ra các popup page. Hi vọng bài viết có thể cung cấp cách nhìn tổng quan, dễ hiểu nhất cho những bạn mới tiếp xúc với các components đơn giản của thư viện

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

0. Chúng ta có thể tìm hiểu rất nhiều components khác rất tiện dụng trong thư viện

<Modal show={this.state.showModal} onHide={this.close}>
    <Modal.Header closeButton>
        <Modal.Title>Modal headingModal.Title>
    Modal.Header>
    <Modal.Body>
       Modal body
    Modal.Body>
    <Modal.Footer>
        <Button onClick={this.close}>CloseButton>
    Modal.Footer>
Modal>

0 của

close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }

4 qua trang chính thức: https://react-bootstrap.github.io/components/

Tài liệu tham khảo và demo: https://react-bootstrap.github.io/components/modal/

programming bootstrap Modal react Modal bootstrap-Vue Modal w3school Bootstrap modal Open modal jQuery Modal HTML, CSS Modal Bootstrap w3school

Hướng dẫn modal react-bootstrap - modal react-bootstrap

I. Tổng quan về Modals

II. Cài đặt

III. Các cách sử dụng Modal

1. Một ví dụ đơn giản nhất về Modal:

2. Customize modal bằng css:

V. Kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội