标签: bootstrap-modal

我的模态体有两个并排的div,如果他的内容对于模态来说太大了,其中一个必须有一个滚动条.不幸的是,滚动条出现在模态体上,而不是我的div上.

是)我有的:

我想要的是:

我的panelGuest有overflow-y自动,我尝试使用'滚动',但滚动条显示但不可用.我在模态体上尝试了不同的溢出值,徒劳无功.

CSS:

#panelGuest{
    overflow-y:auto;
    overflow-x:hidden;
    width: 35%;
    float:left;
    border-right:solid #ff920a 2px;
    min-height:100px;
}

HTML:

 <div id="modalShareBody" class="modal-body">
        <div id="panelGuest" class="panel">
            The div where i want the y-scrollbar
        </div>
        <div id="panelDetail" class="panel">
        </div>
    </div>

这里有一个小问题:http://jsfiddle.net/Ua2HM/2/

我正在开发一个MVC 5 Web应用程序.在我的一个Razor Views中,我有一个表格可以输出几行数据.在每行数据旁边是一个删除按钮.当用户单击删除按钮时,我想要弹出Bootstrap模式,并要求用户确认删除.

@foreach (var item in Model.Data) {
<tr>
 <td>...</td>
 <td>@Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "btn btn-danger btn-xs", data_toggle = "modal", data_target = "#myModal" })</td>
</tr>
}

实际上,当用户单击"删除"按钮时,Modal弹出正常,但我似乎无法获取Actionlink参数中的ID以传递到我的模态中的"确认"按钮,以便它随后将被发送到删除我的控制器中的动作.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title" id="myModalLabel">Delete Nomination</h4>
         </div>
         <div class="modal-body">
           Are you sure you wish to delete this nomination?
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> …

在我的HTML中,我在我的一个模态中有这个:

<a href="#" class="clicker" data-dismiss="modal">Click</a>

如果单击此元素,它会隐藏模态.

但是,我希望能够获得在jQuery中关闭模式的元素,如:

$('#myModal').on('hidden.bs.modal', function(event)
{
    var invoker = $(event.relatedTarget);
});

但这不起作用.relatedTarget似乎只对工作show.bs.modal和shown.bs.modal(按文档).

那么如何才能获得导致模态在hidden.bs.modal事件中关闭的元素？

我有一个使用ng-bootstrap创建的模态组件,如follow(只是一个正文):

<template #content let-c="close" let-d="dismiss">
    <div class="modal-body">
        <p>Modal body</p>
    </div>
</template>

它是角度2组件

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'my-hello-home-modal',
    templateUrl: './hellohome.modal.html'
})

export class HelloHomeModalComponent {
    closeResult: string;

    constructor(private modal: NgbModal) {}

    open(content) {
        this.modal.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            console.log(reason);
        });
    }
}

我真的希望能够从我网站上的其他组件调用此模式.我只想从我的homeComponent调用open方法.

看我的homeComponent

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-home',
    templateUrl: './home.component.html'
})

export …

有谁知道bootstrap模态背景问题？闪烁的背景像素

的jsfiddle

HTML

<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

启动演示模式

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
 </div>
 </div>

概观

在ajax调用期间,将显示进度模式,然后在完成或失败时,应通过调用隐藏它$("#progessDialog").modal("hide");.hide事件似乎没有解雇.我在ajax失败处理程序中有一个事件挂钩,定义为在触发hide事件时记录它并且它永远不会记录但是另一个日志按照预期的那样打印:

   $('#progessDialog').on('hidden.bs.modal', function (e) {
       console.log('calling modal hide');
   });

重现步骤:

• 单击其中一个值(555或222)以触发内联编辑
• 改变价值
• 标签

有趣的事情

模态拒绝隐藏并且js调用完成后,当我进入$("#progessDialog").modal("hide")开发控制台时,模态会按预期隐藏.

注意:尚未完成,所以不要在用户界面上抹布,但是,我愿意接受一些建设性的批评来改进UX/JS.接下来是零验证.

我已经看到其他几个SO问题本质上相似但不是真的相同(这些问题似乎隐藏了一些模态而不是背景 - 我的情况是完整的模态).

这里有一个js小提琴再现问题:https://jsfiddle.net/willtx/8dpL5rLd/29/

语气

  <div class="modal fade" id="progessDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="progessDialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="modal-title" id="progessDialoglLabel">Processing...</h5>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>

我需要从左侧滑动打开引导模态.但是,该功能只能在Bootstrap 3上运行,但不能在Bootstrap 4上运行.

Bootstrap 3 ver.:https://codepen.io/bootpen/pen/jbbaRa,Bootstrap 4 ver.:https://codepen.io/rae0724/pen/yKZjax

<div class="modal left fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

.modal.left .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, …

I'm calling a parent method from child component using props and I'm getting this error:

The way I'm passing props to the AddGuest child component is like this:

import React from 'react';
 import globalService from '../services/globalService';

   import '../styles/chairqueue.css';
   import {buttonText,endPoint} from '../constants/global.constants';
   import Modal from 'react-bootstrap/Modal'
   import ModalDialog from 'react-bootstrap/ModalDialog'
import ModalHeader from 'react-bootstrap/ModalHeader'
import ModalTitle from 'react-bootstrap/ModalTitle'
import ModalBody from 'react-bootstrap/ModalBody'
import ModalFooter from 'react-bootstrap/ModalFooter'
import Button from 'react-bootstrap/Button'
import  { useState, useEffect } from 'react';
import DatePicker from …

我正在开发一个电子商务应用程序，并且使用模式进行注册和登录。

表格很长并且溢出到页面上

我希望模态能够像引导模态一样滚动。

我如何使其可滚动？

模态组件

const MODAL_STYLES = {
    position: "fixed",
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    backgroundColor: '#FFF',
    padding: '30px',
    zIndex: '1000',
    width: '50%',
    borderRadius: '.5em'
}
const OVERLAY_STYLE={
    position: "fixed",
    top: '0px',
    left: '0px',
    bottom: '0px',
    right: '0px',
    backgroundColor: 'rgba(0,0,0, .8)',
    
    zIndex: '1000'
}

登录页面

import React, {useState} from 'react'
import Modal from '../Components/Modal';
const Modal = ({open, children}) => {
    if(!open) return null
    return ReactDom.createPortal(
        <>
        <div style={OVERLAY_STYLE}>
            <div style={MODAL_STYLES}>
                {children}
            </div> 
        </div>
        </>,
        document.getElementById('portal')
    ) …

在 bootstrap4 中，我们使用 pl-5 进行左填充，在 bootstrap5 中它不起作用。

<div class="col-md-6 col-9 p-3 pl-5"> in bootstrap5 this code is not working