मैं अपनी स्क्रीन पर एक स्वीट अलर्ट पॉपअप बनाने की कोशिश कर रहा हूं, जब मैं उस बटन पर क्लिक करता हूं जो यह दिखाता है लेकिन स्क्रीन के निचले दाएं कोने पर। मैं इसे div के केंद्र में चाहता हूं जिसमें यह शामिल है। मैंने इसे बूटस्ट्रैप ग्रिड के अंदर बनाने और इसे केंद्र में रखने की कोशिश की है। लेकिन यह काम नहीं लग रहा है। यहाँ स्क्रीनशॉट है। यहां छवि विवरण दर्ज करें यहाँ मेरा कोड है।

import React, { Component } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Row, Col, Grid } from 'react-bootstrap';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showAlert:null,
        }
    }
  render() {
    return (
    <div>
        <button onClick={() => this.alertShow()}>Click Me!</button>
        <Grid>
            <Row>
                <Col md="4"></Col>
                <Col md="4">
                {this.state.showAlert}
                </Col>
                <Col md="4"></Col>
            </Row>
        </Grid>
    </div>
    );
  }

  hideAlert = () => {
    this.setState({
        showAlert: null
    });
}
alertShow = () => {
    this.setState({
        showAlert: <SweetAlert
        warning
       showCancel
       confirmBtnText="Yes, delete it!"
       confirmBtnBsStyle="danger"
       cancelBtnBsStyle="success"
       title={"Are you sure to delete ?"}
       onConfirm={() => this.hideAlert()}
       onCancel={() => this.hideAlert()}
       focusCancelBtn
   >
       Message details also will be deleted!
  </SweetAlert>
    });
}
}
export default Test;
0
Anees CK 10 जुलाई 2020, 04:53

1 उत्तर

सबसे बढ़िया उत्तर

मुझे इस समस्या का समाधान मिल गया है। मैंने तत्व को केंद्र में रखने के लिए <SweetAlert> की शैली संपत्ति को मैन्युअल रूप से सेट किया है।

यहाँ <SweetAlert> के लिए मेरा अद्यतन कोड है।

<SweetAlert
        warning
        showCancel
        confirmBtnText="Yes, delete it!"
        confirmBtnBsStyle="danger"
        cancelBtnBsStyle="success"
        title={"Are you sure to delete ?"}
        onConfirm={() => this.hideAlert()}
        onCancel={() => this.hideAlert()}
        focusCancelBtn
        style={{right:"0",left:"0",top:"0",bottom:"0",marginRight:"auto",marginLeft:"auto",marginTop:"auto",marginBottom:"auto"}}
    >
        Message details also will be deleted!
</SweetAlert>

धन्यवाद!

0
Anees CK 10 जुलाई 2020, 09:10