标签: bootstrap-modal

显示模式后整个窗口变得模糊 jQuery 为什么？

我想使用 jQuery 显示模式，但所有窗口都变得模糊，如下所示：

这是js：

$(document).ready(function () {
    $('#addLocation').click(function () {
        $('#locationModal').modal('show');
    })
    $('#addDepartment').click(function () {
        $('#departmentModal').modal('show');
    })
    $('#addRole').click(function () {
        $('#roleModal').modal('show');
    })
});

Run Code Online (Sandbox Code Playgroud)

和html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pending Requests</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/settings.css"/>
    <link rel="stylesheet" type="text/css" href="css/navbar.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<div class="icon-bar" style="float: left">
    <div class="employee"><a href="/"><i class="fa fa-home"></i></a></div>
    <div class="employee"><a href="summary.html"><i class="fa fa-list"></i></a><!--Summary--></div>
    <div class="employee"><a href="planDetails.html"><i class="fa fa-globe"></i></a><!--Plan details--></div>
    <div class="employee"><a href="newRequest.html"><i class="fa fa-building-o"></i></a><!--Company holidays--></div>
    <div …

Run Code Online (Sandbox Code Playgroud)

html javascript css jquery bootstrap-modal

Gus*_*avo

2016 08-11

1
推荐指数

1
解决办法

3989
查看次数

在引导模式中使用 jquery 更改表单输入字段值

我在引导模式中有一个表单。我希望输入字段显示用户第一次填写表单时输入的过去值，这些值是我从 cloudant 数据库中检索的。我希望这些输入字段是可编辑的，以便用户可以重新提交表单并进行任何更改。但是，当我尝试在输入字段中显示过去的信息时，我陷入了困境。我找不到输入字段的这些值没有被更改的任何原因。

将我的按钮添加到我的 boostrap 列表组的 javascript：

var loadIotPanel = function(iotsJSON)
{
for(var iot in iotsJSON)
    {

        var button = $('<button/>').text(iotsJSON[iot].appID).addClass('list-group-item iot').attr({name:iotsJSON[iot].appID, "aria-label": "Quick View IoT", "data-toggle": "modal", "data-target": "#quick-view-iot-modal", type: "button"});
        $('#iot-list').append(button);
    }
};

Run Code Online (Sandbox Code Playgroud)

我的按钮将放置在我的列表组中的 html：

<div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12 col-sm-12 dash-col">
                <button name="edit-iots" aria-label="Edit IoTs" data-toggle="modal" data-target="#edit-iots-modal" type="button" class="icon"><span class="glyphicon glyphicon-edit gray"></span></button>
                <p class="fancy-font dash-item-title">Your IoTs</p>
                <button name="add-iot" aria-label="Add IoT" data-toggle="modal" data-target="#connect-iot-modal" type="button" class="icon"><span class="glyphicon glyphicon-plus gray"></span></button>
                <div class="list-group iot" id="iot-list"><!-- buttons will be placed here …

Run Code Online (Sandbox Code Playgroud)

javascript ajax jquery twitter-bootstrap bootstrap-modal

Ken*_*ees

2016 08-17

1
推荐指数

1
解决办法

1万
查看次数

Bootstrap 模态最小高度不起作用

我有一个简单的引导模式，我试图设置最小高度，但它不起作用。

这是 HTML：

    <div class="modal fade" id="adminManagerModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Admin Manager</h4>
                </div>
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#managePlayers">Manage Players</a></li>
                    <li><a data-toggle="tab" href="#manageTournaments">Manage Tournaments</a></li>
                </ul>
                <div class="tab-content">
                    <div id="managePlayers" class="tab-pane fade in active">
                        <button id="btnAddPlayer" class="btn btn-primary btn-sm" type="button">Add Player</button>
                    </div>
                    <div id="manageTournaments" class="tab-pane fade">
                        <form>
                            <label class="radio-inline"><input id="optUSCF" type="radio" name="optPlayerType" checked>USCF</label>
                            <label class="radio-inline"><input id="optFIDE" type="radio" name="optPlayerType">FIDE</label>
                        </form>
                    </div>
              </div>
            </div>
        </div>
    </div>

Run Code Online (Sandbox Code Playgroud)

请注意，模式的 id 是“adminManagerModal”

这是CSS：

#adminManagerModal
{
    min-height:500px; …

Run Code Online (Sandbox Code Playgroud)

html css bootstrap-modal

Max*_*eue

lucky-day

1
推荐指数

1
解决办法

6627
查看次数

Onclick 将值传递给弹出模式

我创建了一个动态表，在该表中我有一个应该触发弹出模式的链接。

我尝试使用“onclick”将值传递给模式弹出窗口，但该值仍然没有显示在模式弹出窗口中

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css">
<link href="../libraries/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="../libraries/css/jquery-ui.css">
<script src="../libraries/js/jquery-1.10.2.js"></script>
</head>

<?php
$sql="select * from tbl_company";
$query=mysql_query($sql);
while($row=mysql_fetch_assoc($query)){
    $code=$row['code'];
    $name=$row['name'];
?>
<span id="myBtn" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="getCompanyCode('<?php echo $code;?>','<?php echo $name;?>')"><a href="javascript:void(0)"><img src="../images/edit.png" style="width:20px;"></a></span>
<?php
}
?>

<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
    <span class="close"><a href="javascript:void(0)">X</a></span>
    <input id="company" name="company" type="text" value="" readonly></td>
    <input id="codes" name="codes" type="text" value="">
</div>
</div>
<script>
    function getCompanyCode(str,nm) { …

Run Code Online (Sandbox Code Playgroud)

html javascript php bootstrap-modal

Gum*_*lar

2016 12-27

1
推荐指数

1
解决办法

5万
查看次数

如何检测 Bootstrap 模式关闭的方式

我将处理程序附加到 Bootstraphidden.bs.modal事件以检测模式何时关闭，但它可以通过多种方式关闭：

通过$('#modal').modal('hide')或显式关闭它$('#modal').modal('toggle')；
单击模态的背景部分（如果允许）；
通过数据属性，例如 data-dismiss="modal"

有没有办法检测使用了哪个选项？在hidden.bs.modal处理程序内部e.target似乎总是div#modal

javascript jquery bootstrap-modal bootstrap-4

Dem*_*sch

lucky-day

1
推荐指数

1
解决办法

3496
查看次数

如何在 angular 7 的页面加载中打开 ng-bootstrap 模态弹出窗口？

我无法在 angular 7 页面加载时显示 ng-bootstrap 模式弹出窗口。

我试过下面的代码来打开它。

openVerticallyCentered(content) {

this.modalService.open(content, { centered: true });.
this.modalService.open(content, { beforeDismiss: false });

}

Run Code Online (Sandbox Code Playgroud)

modalpopup bootstrap-modal ng-bootstrap angular

Ati*_*zad

lucky-day

1
推荐指数

1
解决办法

2178
查看次数

React-Bootstrap modal 只取地图的最后一项

我是编码初学者。我正在创建我的平面设计师作品集。我已将所有投资组合内容（缩略图、客户名称、描述...）放入 JSON 文件中名为“投资组合”的数组中。数组中的每一项都是不同的项目。我显示了一个缩略图库，当我点击一个缩略图时，一个带有项目详细信息的模式会打开。

我在我的“投资组合”数组上映射以显示画廊，这是有效的。但是当我打开模态时，它总是显示我数组的最后一项。

import React from 'react';
import Modal from 'react-bootstrap/Modal';

class Portfolio extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      projectName: "",
      show: false
    };

    this.handleShow = () => {
      this.setState({ show: true });
    };

    this.handleClose = () => {
      this.setState({ show: false });
    };
  }

  componentDidMount() {
    fetch("https://api.myjson.com/bins/1cbaj5")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.portfolio
          });
        },
        (error) => {
          this.setState({
            isLoaded: true, …

Run Code Online (Sandbox Code Playgroud)

modal-dialog bootstrap-modal reactjs

cyr*_*ilb

2020 08-11

1
推荐指数

1
解决办法

1301
查看次数

在 VueJS 中显示没有 Jquery 的 Bootstrap4 模式

我正在尝试从 VueJS 中的函数显示引导模式。我基本上是在寻找执行此操作的普通 JS 方式：$('#myModal').modal("show")。BootstrapVue 有很多方法可以做到这一点，但我目前使用的项目没有使用 bootstrapVue，只是标准的 bootstrap4。

//component.vue

<template>
  <div>
    <button type="button" class="btn btn-primary">My Modal</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          ...
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    buttonClick() {
      // Need to display modal in here
      //$('#myModal').modal("show")
    }
  }
};
</script>

Run Code Online (Sandbox Code Playgroud)

javascript twitter-bootstrap bootstrap-modal vue.js bootstrap-4

use*_*003

lucky-day

1
推荐指数

1
解决办法

2048
查看次数

为什么我在 Rails 6 中的引导程序不起作用？

我想在我的 Rails 应用程序中有一个模式/弹出窗口。最后，即使使用幻灯片/旋转木马。我遵循了几个教程，但都不起作用。例如：CrashingChandelier。此外，堆栈溢出的许多问题也无济于事，因为它们中的大多数都处理 js 文件。

本课程说它可以在不使用 Javascript 文件的情况下使用 Bootstrap-modal。虽然应该很简单，但我无法修复它，我不知道如何调试它。所以请帮助我。

这是带有按钮和模态的index.html.erb。

<!-- BUTTON -->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<!--MODAL-->

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
            <div class="pull-left"><h4>Your picture gallery</h4></div>
              <button type="button" class="close" data-dismiss="modal" title="Close">
                <span class="glyphicon glyphicon-remove"></span>
              </button>
          </div>
    <div class="modal-body">

      <p>hello, world!</p>

    </div><!--end modal-body-->
        <div class="modal-footer">
        <div class="pull-left">
        </div>
          <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
      </div><!--end modal-footer-->
    </div><!--end modal-content-->
  </div><!--end modal-dialoge-->
</div><!--end myModal-->

Run Code Online (Sandbox Code Playgroud)

这是我的application.scss

/*
 *
 */

@import "bootstrap-sprockets";
@import "bootstrap"; …

Run Code Online (Sandbox Code Playgroud)

ruby-on-rails carousel bootstrap-modal

Joo*_*den

2020 11-04

1
推荐指数

1
解决办法

1394
查看次数

Bootstrap 5 模式不适用于入门模板

我正在尝试使用 Bootstrap 5 入门模板（我使用 Bootstrap Bundle with Popper 选项）来实现一个简单的模态，但由于某种原因，它不起作用。我已经解决了其他类似的问题，但不幸的是，没有一个对我有用。我想不通我哪里出错了。

我附上了简化的代码片段。我试图避免使用 javascript 来触发模态。我想使用 HTML data-* 属性来触发模式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"/>
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <h2>Basic Modal Example</h2>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
        Open Modal
      </button>
      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" …

Run Code Online (Sandbox Code Playgroud)

html bootstrap-modal bootstrap-5

Nam*_*kar

lucky-day

1
推荐指数

1
解决办法

3407
查看次数