标签: bootstrap-modal

从任何父级使用ui-router的模态对话框,如何正确指定状态？

我试图打开一个模式对话框采用了棱角分明的UI路由器作为解释在这里.

目标是可以在任何地方访问对话框,不一定需要URL,但如果我可以链接到打开对话框的页面,那将是很好的.

这是破碎的样本:

http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=preview

单击"菜单"应从任一页面打开对话框.

路由逻辑:

app.config(function($stateProvider,$locationProvider, $urlRouterProvider, modalStateProvider) {
  $urlRouterProvider.otherwise("/");
  $locationProvider.html5Mode(true);

  $stateProvider
    .state("app", {
      url: "",
      abstarct: true,
      views: {
        "" : {
          templateUrl: "main.html",
        },
        "header@app": {
          templateUrl: "header.html"
        },
        "footer@app":{
          templateUrl: "footer.html"
        }
      }
    })

    .state("app.home", {
      url: "/",
      templateUrl: "home.html",
    })
    .state("app.content", {
      url: "/content",
      templateUrl: "content1.html",
    });


  modalStateProvider.state("app.home.menu", {
    template: "I am a Dialog!",
    controller: function ($scope) {
      $scope.dismiss = function () {
        $scope.$dismiss();
      };
    }
  });
});

Run Code Online (Sandbox Code Playgroud)

它不应该是"app.home"的孩子,因为我希望它可以从任何地方访问.我怎样才能做到这一点？

angularjs bootstrap-modal angular-ui-router

fus*_*sio

2017 05-23

8
推荐指数

1
解决办法

1万
查看次数

打开我的Bootstrap模式后无法点击任何内容

抱歉基本的问题,我正在研究MVC ASP.NET,我正在尝试在导航栏中添加一个bootstrap模式,我运行代码,我可以看到我可以触摸它的按钮,但打开后,屏幕是不可点击的我必须f5再次点击任何地方,这是我第一次使用来自bootstrap的模式,如果我必须编写一些JavaScript代码,搜索谷歌周围的所有内容,但无处不在说你只需要jquery,bootstrap.js和.css,没有别的.如果我遗失了什么,请告诉我.谢谢,这是我的代码.

PD:我有一个已经从bootstrap工作的旋转木马

@if (Session["usuario"] == null)
            {
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    Ingresar
                </button>

                <!-- 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">Iniciar Sesión</h4>
                            </div>
                            <div class="modal-body">
                                <form method="post" action="@Url.Action("DoLogin","Usuario")">
                                        <span class="alert-danger">@ViewBag.NoUser</span>
                                        <label for="NombreDeUsuario" class="sr-only">Nombre de Usuario</label>
                                        <input type="text" id="NombreDeUsuario" name="NombreDeUsuario" class="form-control" placeholder="Ingresa tu Usuario" required="" autofocus="" />
                                        <br />

                                        <label for="Contrasena" class="sr-only">Contraseña</label>
                                        <input type="password" id="Contrasena" name="Contrasena" class="form-control" placeholder="Ingresa tu …

Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap bootstrap-modal

Fra*_*rdo

2015 12-17

8
推荐指数

1
解决办法

1万
查看次数

Bootstrap模态体被挤压到模态页脚

我正在使用Bootstrap创建一些模态.

我正在使用Bootstrap组件解释中div显示的不同.

什么我遇到的是,当我的屏幕尺寸大于x(平均一些未知的值)的DIV包含我modal-body推了(空),并包含在div我modal-footer吸收的元素modal-body.

这是一张图片来解释我在说什么:

正常模态

压缩模态

编码相同,只需更改屏幕尺寸即可.

<HTML>
  <head>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div id='modal' class='modal-dialog'>
      <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'>Change name</h4>
        </div>
        <div class='modal-body'>
          <form id='formModal' method='post' action='giocatori.php'>
            <div class='form-group col-md-12'>
              <label>Name</label>
              <input id='nome_iscrizione' type='text' class='form-control' name='name' value='New name'>
            </div>        
          </form>
        </div>
        <div class='modal-footer'>
          <button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
          <button type='button' class='btn btn-primary'>Salva</button>
        </div>
      </div>
    </div> …

Run Code Online (Sandbox Code Playgroud)

html modal-dialog twitter-bootstrap bootstrap-modal

xdo*_*ola

2016 01-23

8
推荐指数

1
解决办法

5748
查看次数

angular 4带有bootstrap 4数据表

我需要使用一个带有角度4和bootstrap 4的表,但是bootstrap 4官方表看起来并不太好.我找到了这个git项目:https: //www.npmjs.com/package/angular-4-data-table-fix

但无法找到有关如何使用它的任何文档.有谁知道这个项目或类似的项目,可以帮助吗？

谢谢.

datatable bootstrap-modal bootstrap-4 angular

Sha*_*hay

lucky-day

8
推荐指数

1
解决办法

4万
查看次数

使用Selectize和Ajax时,在Bootstrap模式中显示Rails错误消息

我正在尝试构建一个应用程序,允许用户分享艺术家关于其他艺术家的引用.例如,Bob Dylan关于John Lennon的一句话.因此,我的Artist模型的设置方式允许艺术家在报价中同时成为演讲者和主题,每个报价都属于每个艺术家作为演讲者或主题.

在使用Selectize触发模态时,我无法在Bootstrap模式中显示Rails错误消息.我按照这个演示得到了模态.

模态用于Artist从quotes/new表单创建新模式,但我无法获取Artist模型的错误消息以在Bootstrap模式或引号/新页面中显示.当我尝试在模态中创建触发错误消息(例如validates_uniqueness)的内容时,它只是关闭模式并且不显示错误消息.其他一切都按预期工作.

将Ajax请求连接到视图时我错过了什么？

这是我表格的相关部分:

<%= f.label :speaker, 'Who said it?' %>
<%= f.collection_select :speaker_id, @speakers, :id, :name,
{prompt: 'Select an artist'}, {class: 'form-control selectize-speaker'} %>

Run Code Online (Sandbox Code Playgroud)

引号/ form.html.erb的完整来源

这是我的控制器中的相关代码:

class ArtistsController < ApplicationController
  def create
    @artist = current_user.artists.build(artist_params)
    authorize @artist

    respond_to do |format|
      if @artist.save
        if request.referer.include?("artists")
          flash[:success] = "Artist was successfully created."
          format.html { redirect_to @artist }
        else
          format.json { render json: @artist }
        end
      else
        format.html { …

Run Code Online (Sandbox Code Playgroud)

javascript ajax jquery ruby-on-rails bootstrap-modal

Lee*_*lly

lucky-day

8
推荐指数

1
解决办法

385
查看次数

基于所选链接的模型弹出窗口的动态内容

我有一个Accept Reject按钮.如果用户点击这些按钮,将显示单独的模型弹出窗口.接受和拒绝按钮链接具有单独的data-id和data-action.

我的目标是编写单个javascript函数来加载模型弹出窗口的内容,而不是重复模态代码.

ERB代码

<% @non_claim_items.each do |damage_item| %>
  <tr>
    <td>
      <div class="input-prepend">
        <span class="add-on"><%= damage_item.estimated_total_repair_cost.currency %></span>
        <span class="uneditable-input input-small currency-format"><%= damage_item.estimated_total_repair_cost %></span>
      </div>
    </td>
    <td>
      <a data-toggle="modal" data-target="#acceptModel" data-id="<%= damage_item.id %>" data-action = 'accept' class="btn btn-small btn-primary">Accept</a>
      <a data-toggle="modal" data-target="#rejectModel" data-id="<%= damage_item.id %>" data-action = 'discuss' class="btn btn-small btn-default">Discuss</a>
    </td>

  </tr>
<% end %>

<div id="acceptModel" class="modal fade hide" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4><%= t('headings.damage_item.accept_damage') %></h4>
  </div>
  <div class="modal-body" …

Run Code Online (Sandbox Code Playgroud)

javascript jquery ruby-on-rails bootstrap-modal

Ana*_*ose

lucky-day

8
推荐指数

1
解决办法

201
查看次数

特定div上的滚动条进入bootstrap模态体

我的模态体有两个并排的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;
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

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

css overflow scrollbar twitter-bootstrap bootstrap-modal

Get*_*etz

2016 03-07

7
推荐指数

1
解决办法

4万
查看次数

Angular2 ng-bootstrap模态组件

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

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

Run Code Online (Sandbox Code Playgroud)

它是角度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);
        });
    }
}

Run Code Online (Sandbox Code Playgroud)

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

看我的homeComponent

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

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

export …

Run Code Online (Sandbox Code Playgroud)

bootstrap-modal ng-bootstrap angular

use*_*839

2017 04-12

7
推荐指数

1
解决办法

2万
查看次数

bootstrap 4模态在调用hide后没有关闭

概观

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

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

Run Code Online (Sandbox Code Playgroud)

重现步骤:

单击其中一个值(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>

Run Code Online (Sandbox Code Playgroud)

ajax jquery twitter-bootstrap bootstrap-modal bootstrap-4

Wil*_*pez

2017 12-27

7
推荐指数

1
解决办法

3784
查看次数

如何在reactjs中使模式可滚动

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

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

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

我如何使其可滚动？

模态组件

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'
}

Run Code Online (Sandbox Code Playgroud)

登录页面

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')
    ) …

Run Code Online (Sandbox Code Playgroud)

modal-dialog bootstrap-modal reactjs

etr*_*anz

2021 07-25

7
推荐指数

1
解决办法

2万
查看次数