modal in asigg plaza

psicoadmin/src/Components/Modal/AyudaAsignar.jsx

+import React from 'react';
+import { Modal } from 'react-bootstrap'
+import $ from 'jquery'
+
+export default function Mostrar(props) {
+
+    let { visible, onClose } = props
+
+    return(
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
+            <Modal.Header>
+                <button  onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
+                <h4 class="modal-title">Asistencia</h4>
+            </Modal.Header>
+            <Modal.Body className="modal-body">
+                <div class="data_notification">
+                    <p>En el menú Pruebas encontrarás la opción Asignar , utilízala para seleccionar las pruebas que le serán aplicadas al candidato. Selecciona el código del candidato y marca las pruebas, una vez marcadas presiona el botón Asignar para comenzar la aplicación de las mismas.</p>
+                </div>
+            </Modal.Body>
+        </Modal>
+    )
+}
+
+export function ShowComportamiento() {
+    $("#comportamiento_body").css('display', 'block');
+    $("#personalidad_body").css('display', 'none');
+    $("#inteligencia_body").css('display', 'none');
+    $("#personalidad").removeClass("active");
+    $("#inteligencia").removeClass("active");
+    $("#comportamiento").addClass("active");
+};
+
+export function ShowPersonalidad() {
+    $("#comportamiento_body").css('display', 'none');
+    $("#personalidad_body").css('display', 'block');
+    $("#inteligencia_body").css('display', 'none');
+    $("#comportamiento").removeClass("active");
+    $("#inteligencia").removeClass("active");
+    $("#personalidad").addClass("active");
+};
+
+export function ShowInteligencia() {
+    $("#comportamiento_body").css('display', 'none');
+    $("#personalidad_body").css('display', 'none');
+    $("#inteligencia_body").css('display', 'block');
+    $("#comportamiento").removeClass("active");
+    $("#personalidad").removeClass("active");
+    $("#inteligencia").addClass("active");
+};

psicoadmin/src/Css/all.css

     text-align: right;
     margin-bottom: 50px;
 }
-.botones_interactivos_asignar a{
+.botones_interactivos_asignar span{
+    margin-right:25px;
     font-size: 14px;
     color: #fd4b4b;
     transition: all 0.3s;
 }
-.botones_interactivos_asignar a:hover {
+.botones_interactivos_asignar span:hover {
     color: #981111;
     transition: all 0.3s;
 }

psicoadmin/src/Pages/PruebaAsignar.jsx

-import React, { useEffect } from 'react'
+import React, { useEffect , useState} from 'react'
 import {Col, Row } from 'react-bootstrap'
 import $ from 'jquery'
 import { inteligencia, comportamiento, personalidad } from '../Components/TipoTest'
+import AyudaAsignarModal, { ShowComportamiento, ShowPersonalidad, ShowInteligencia } from '../Components/Modal/AyudaAsignar'
 
 
 function CardPrueba(props){
 
 export function PruebaAsignar() {
 
-    function ShowComportamiento() {
-        $("#comportamiento_body").css('display', 'block');
-        $("#personalidad_body").css('display', 'none');
-        $("#inteligencia_body").css('display', 'none');
-        $("#personalidad").removeClass("active");
-        $("#inteligencia").removeClass("active");
-        $("#comportamiento").addClass("active");
-    };
-
-    function ShowPersonalidad() {
-        $("#comportamiento_body").css('display', 'none');
-        $("#personalidad_body").css('display', 'block');
-        $("#inteligencia_body").css('display', 'none');
-        $("#comportamiento").removeClass("active");
-        $("#inteligencia").removeClass("active");
-        $("#personalidad").addClass("active");
-    };
-
-    function ShowInteligencia() {
-        $("#comportamiento_body").css('display', 'none');
-        $("#personalidad_body").css('display', 'none');
-        $("#inteligencia_body").css('display', 'block');
-        $("#comportamiento").removeClass("active");
-        $("#personalidad").removeClass("active");
-        $("#inteligencia").addClass("active");
-    };
-
 
     useEffect(() => {
 
         $("#pruebas").addClass("active");
         $("#aplicar").addClass("active");
 
-        ShowInteligencia();
+        ShowComportamiento();
 
     },[])
 
+    let [ modal, setModal  ] = useState(false)
 
     return(
         <section>
             <div className="content-section">
                 <div className="main">
                     <h1>Asignación de pruebas</h1>
-                    <p>Selecciona el código del candidato y posteriormente las pruebas que deberá ejecutar.</p>
+                    <Row>
+                        <Col style={{ marginBottom : 15 }}>
+                            <p>Selecciona el código del candidato y posteriormente las pruebas que deberá ejecutar.</p>
+                        </Col>
+                    </Row>
                     <div className="asignar_usuario">
-                        <div className="row">
-                            <div className="col-md-3">
+                        <Row>
+                            <Col md="3">
                                 <div className="datos_candidato">
                                     <label>Seleccionar código</label>
                                     <select>
                                         <option>008</option>
                                     </select>
                                 </div>
-                            </div>
-                            <div className="col-md-3">
+                            </Col>
+                            <Col md="3">
                                 <div className="datos_candidato">
                                     <label>Nombre</label>
                                     <input type="text" name="nombre" placeholder="Nombre candidato" readOnly/>
                                 </div>
-                            </div>
-                            <div className="col-md-3">
+                            </Col>
+                            <Col md="3">
                                 <div className="datos_candidato">
                                     <label>Edad</label>
                                     <input type="number" name="text" placeholder="28" readOnly/>
                                 </div>
-                            </div>
-                            <div className="col-md-3">
+                            </Col>
+                            <Col md="3">
                                 <div className="datos_candidato">
                                     <label>Género</label>
                                     <input type="text" name="genero" placeholder="Hombre" readOnly/>
                                 </div>
-                            </div>
-                        </div>
+                            </Col>
+                        </Row>
                     </div>
+
                     <div className="tabs_pruebas">
                         <Row className="row">
                             <Col md="4">
                             </Col>
                         </Row>
                     </div>
+
                     <div className="pruebas_grid">
 
                         <div className="comportamiento_body" id="comportamiento_body">
 
 
                         <div className="botones_interactivos_asignar">
-                            <div className="row">
-                                <div className="col-md-12">
-                                    <a href="/" data-toggle="modal" data-target="#ayudaAsignar">Ayuda</a>
+                            <Row>
+                                <Col md="12">
+                                    <span onClick={() => setModal(true)}>Ayuda</span>
                                     <button>Asignar</button>
-                                </div>
-                            </div>
+                                </Col>
+                            </Row>
                         </div>
+
                     </div>
                 </div>
             </div>
+            <AyudaAsignarModal visible={modal} onClose={() => setModal(false)} />
         </section>
     )
 }