标签: bootstrap-modal

我试图在我的 React 应用程序中包含一个 google place 自动完成输入框。

我已按照此处的指南放置<input>文本字段，并初始化搜索框，如下所示：

export default class MySearch extends class Component {
    ...

    componentDidMount() {
        var defaultBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(-33.8902, 151.1759),
            new google.maps.LatLng(-33.8474, 151.2631));

        var input = document.getElementById('searchTextField');

        var searchBox = new google.maps.places.SearchBox(input, {
            bounds: defaultBounds
        });
    }
    render() {
        return (
            ...

            <input id="searchTextField"
                   type="text"
                   className="form-control"
                   placeholder="Search for a location"
            />
        );
    }
}

但我没有看到文本字段中出现任何建议。

我检查了“网络”选项卡，以查看在我键入时 API 请求是否被命中，并且当我键入时，我不仅看到请求，还看到来自 API 的响应，以及基于我的搜索词的匹配位置。

我不知道为什么收到的建议没有显示在我的输入框下方的下拉建议列表中。

提前致谢 ：）

更新

PS：我已将文本框放置在引导模式内。当我将完全相同的文本框放置在引导模式之外时，它的工作就像微风一样。

知道为什么文本框在模式内不显示建议吗？

我试图在单击模态触发按钮时更改模态正文文本。模式正在打开，但模式正文文本没有改变。这是模态的代码：

<button type="button" class="btn btn-info open-modal" data-remote="false" data-toggle="modal"  data-target="#myModal">Register</button>

<!-- Modal -->
<div id="myModal" class="modal fade" 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 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

然后是防止默认事件的来源

$('.open-modal').click(function(e)
{
    e.preventDefault();
    alert('hello i am jquery');
    $('#myModal').modal('show');
});

为什么alert('你好我是jquery'); 行没有执行？

我有一个包含文本框的 sweetalert 框。sweetalert 在引导模式框中打开。在 Firefox 中，我尝试单击文本框，但它没有获得焦点。

这是我的甜蜜警报代码：

swal(
        {
            title:              "Create New Design",
            input:              "text",
            showCancelButton:   true,
            inputPlaceholder:   "Title",
            preConfirm: function(input)
            {
                // code to validate the input
            }
        });

这是屏幕截图：

您好，我正在使用 JQuery 响应式数据表和引导弹出模式，两者都工作正常，我想使弹出窗口可拖动并重新调整大小。下面的代码适用于数据表和弹出式拖动山墙，但弹出式调整大小不起作用。我尝试了一个示例弹出式代码，它在拖动和调整大小方面都工作正常，但是当我与 J 一起使用时-弹出窗口不起作用的查询数据表。下面是我的代码，我评论了 jquery.min.js 文件，现在响应式数据表和带有拖动山墙的弹出窗口正在工作，但无法重新调整大小。如果我取消注释 jquery.min.js 文件弹出窗口将不起作用。请指出我哪里错了。我是否需要添加或删除任何 css 或 js 文件。下面是我的完整代码。

<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/new/new.js"></script>
<link href="resources/new/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="resources/new/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/new/moment.min.js"></script>
<script type="text/javascript" src="resources/new/bootstrap-datetimepicker.min.js"></script>
//datatable filter and proper 
<link href="resources/new/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="resources/new/jquery.dataTables.min.js"> </script>
//filter every column
<link href="resources/new/dataTables.bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="resources/new/dataTables.responsive.min.js"> </script> 
//responsive datatable
<link href="resources/new/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- <script type="text/javascript" src="resources/new/jquery.min.js"> </script>  -->
<script type="text/javascript" src="resources/new/jquery-ui.min.js"> </script>  
 <!-- jstl tag library -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" …

当我在表单中使用引导模式时，它只显示第一个值。

在这里我的template.html

{% for company in companys %}
<tr>
    <td>{{ company.name }}</td>
    <td>{{ company.desc }}</td>
    <td align="center">
        <button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default2">
            delete
        </button>

        <div class="modal fade" id="modal-default2">
            <div class="modal-dialog">

                <form method="post" action="{% url 'system:company_delete' pk=company.pk %}">
                {% csrf_token %}

                <div class="modal-content">    
                    <div class="modal-body">
                        <input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ company.pk }}">
                        <input type="submit" class="btn btn-primary" value="Delete">
                    </div>
                </div>

                </form>
            </div>
        </div>
    </td>
</tr>

{% endfor %}

它循环所有数据，当点击delete确认表单时会弹出。但它返回相同的值。

但如果没有模态引导它的工作正常。

例子：template.html

{% for company …

我已经为这个问题争论了一个多星期，但几乎没有任何进展。

我看过

• 如何设置jquery select2的选定值？
• Select2 在嵌入引导模式时不起作用
• 使用 JSON 结果填充下拉列表 - 使用 MVC3、JQuery、Ajax、JSON 级联 DropDown
• 重置 select2 值并显示占位符
• https://github.com/select2/select2/issues/3057
• https://github.com/select2/select2/issues/1436。

最后，查看https://select2.org/troubleshooting/common-problems后

我尝试同时应用dropdownParent: $('#myModal')和

// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

这些修复都不起作用，所以我真的束手无策，准备完全放弃使用模式。基本上，我从服务器获取 JSON 对象中的数据，然后使用该数据填充模式。除第一个组合框之外的所有元素（其中一些是选择/组合框）的填充工作正常。

预先感谢您的帮助，如果答案发布在其他地方，我很抱歉，但我找不到它。以下是相关代码：

<!-- Modal to Add / Edit Delay parent div must have same id as value of the data-target attribute used to trigger the modal -->
<div class="modal fade" id="delayAddModal" tabindex="-1" role="dialog" aria-labelledby="delayAddLabel">
    <div class="modal-dialog" role="document">
        <!-- …

我在模式内有一个表单，提交后我不希望它关闭。我得到 SQL UPDATE 语句设置的方式是这样，如果数据库更新了，它将重定向到同一页面，所以在尝试保持模式打开时，这会弄乱很多东西。

if (isset($_POST['insert6']))
{
    $kval_antall = $_POST['kval_antall'];
    $id = $_POST['id'];

    $sql6 = ("UPDATE test3 SET kval_antall='$kval_antall' WHERE id='$id'");


    if (mysqli_query($conn, $sql6)) {
    header("Location: aktivbonus.php");
    exit;
} else {
    echo "Error: " . $sql6 . "<br>" . mysqli_error($conn);
}}

因为如果我之前放置一些代码并保持模式打开，如果数据在数据库中成功更新，它将返回到同一页面并关闭模式。重定向后我找不到打开模式的方法。

这是我尝试过的一些内容：（主教的回答） 如何重定向回索引页面并根据重定向显示模式弹出窗口？PHP

在提交表单并重定向回来后，代码可以正常工作并完美显示消息，但是当我插入此内容时，什么也没有发生：

<?php if (isset($_GET['thanks']) && 1 == $_GET['thanks']) { ?>
<script type='text/javascript'>
   $("#message539").modal("show");
</script>
<?php } ?>

我让我的网站工作的方式是页面上出现一个带有data-target="#message539"<- id 更改的按钮，具体取决于您按下的按钮。

与尝试调用的模态相同（此处 id 更改相同）：

<div class="modal fade bd-example-modal-lg" id="message'. $row['id'] .'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> …

我的 ReactJS App - CodeSandBox 链接中有以下结构。我试图通过使用 Bootstrap 模式窗口的按钮以某种方式提交 Formik 表单，但是我无法理解如何从树下的 2 个组件调用表单提交并将功能组合在一起。

有人可以建议这是否可以实现吗？

谢谢！

如链接http://angular-ui.github.io/bootstrap (从顶部的Directive下拉列表中选择模态)中所示,有一个名为windowTemplateUrl的参数,用于覆盖模态内容.因此,如果我们使用它,在templateUrl或模板中给出什么,因为调用modal的open函数需要其中一个.例如,代码如下.

$scope.open = function(){
  var modalInstance = $modal.open({
      windowTemplateUrl : '/client/content.html'
  })
}

如果我运行上面的代码,则会出现需要templateUrl或模板的错误.那么,我如何使用windowTemplateUrl.

我正在制作一个页面,您可以在其中检查表格中的几行,然后将其导出.

这是代码http://www.bootply.com/Hrll6yz0c1

向模态导出菜单添加行的代码很有用,但删除模态内部行的代码不起作用.

删除代码

$('button#delB').click(function() {
     $(this).parent().parent().remove();
});

对于这个生成的表

$('button#addB').click(function() {
                        var toAdd = $(this).parent().parent().find("#sub_id").html();
                        var toAdd2 = $(this).parent().parent().find("#val1").html();   
                        var toAdd3 = $(this).parent().parent().find("#val2").html(); 
                        $('#tblGrid').append("<tr><td>"+toAdd+"</td><td>"+toAdd2+"</td><td>"+toAdd3+"</td><td><button type='button' class='btn btn-default glyphicon glyphicon glyphicon-remove' id='delB'></button></td></tr>"); 

 });

我尝试使用相同的代码删除外部模态,它正在工作.