时间戳

首页 > 解决方案 > 像模型一样打开一个对话框，但附加到元素上

javascript - 像模型一样打开一个对话框，但附加到元素上

问题描述

我是 React Js 的新手，我想打开一个下拉框，其中可能包含按钮、输入字段等，但问题是我尝试了模型下拉列表和许多解决方案，但它并没有完全附加到元素开口的底部单击它时的下拉菜单。另一个问题是它包含的组件的最大高度只有 50 像素，因此模型应该漂浮在该组件上。

这是设计视图

在附加的图像中，单击打开时该框正在打开，并且上方的蓝色条状组件包含代码，但它同时显示在两者上

只想要可以包含元素的框，并且正好位于打开它的元素下方

import React from "react"
import UserTopBar from "./UserTopTab"
import BelowSection from "./BelowSection"

const Parent =()=>{
  <UserTopBar />
  <BelowSection />
 }
 export default Parent

//顶栏

import React from 'react';
import Notification from '../Notification'
import { NavLink } from 'react-router-dom'
import { QuestionCircleFilled, CloseOutlined } from '@ant-design/icons';

class UserTopTab extends React.Component {
    
    render() {
        return (
            <>
                <div className="d-inline-flex" style={{ background: "#242F84", width: "100%", zIndex: "990" }}>
                    <NavLink to="/" className="Cambium ">
                        <p className="mb-0 px-2 White" >Title</p>
                    </NavLink>
                    <NavLink to="/AllSearches" className='tab my-auto TabStyle'>
                        <p className="mb-0 FS_20 px-2 White" >All Searches</p>
                    </NavLink>
                    <NavLink to="/AllSearches" className='tab my-auto TabStyle'>
                        <p className="mb-0 FS_20 px-2 White" >Untitled 1</p>
                    </NavLink>
                     {this is toogle button when clicked it will open a dialogue box attached to its bottom}
                     <button type="button" className="mb-0 FS_20 px-2 White" >Open +</button>
{*innerpart of the box*}
                    <Notification />
                    <p className="mb-0 Help"><QuestionCircleFilled /></p>
                </div>
            </>
        );

    }
}

export default UserTopTab;

//第二节

import React from 'react';
const BelowSection =()=>{
 <div>
     <h1>bellow Section is displayed here </h1>
 </div> 
}
 export default BelowSection

标签： javascriptreactjsjsx

解决方案

将用于打开框的按钮替换为下面的目标按钮，您可以在打开的对话框中执行任何操作

<div class="dropdown newTab">
   <button type="button"
           className="mb-0 FS_20 px-2 White Grey border-0 h-100 dropdown-toggle"
           id="dropdownMenuButton" data-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false"
           style={{ backgroundColor: "#050A30" }} >Open +</button>  //target from where you want to place the buton

    <div class="dropdown-menu p-0" aria-labelledby="dropdownMenuButton">
             Your inner code to be in here that you 
             need to display in the Drop down Box
    </div>
 </div>

推荐阅读