Question

我使用来自w3school的模态，并且如果我将按钮调用到页面正文中的模态，它可以正常工作，但是如果我将按钮放在bootstrap导航栏下拉列表中则不起作用。这是开放模式，但它立即关闭。显然模态与下拉菜单同时关闭，但我不知道如何。

有没有人知道这个问题的解决方案？

<!DOCTYPE html>
<html>
<head>
    <style>
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

<h2>Modal Example</h2>

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right white nav-rlm">
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <i>Admin</i>
                <i class="glyphicon glyphicon-user"></i>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu dropdown-user">
                <li>
                    <a href="<?php echo base_url(''); ?>"><button id="myBtn">Open Modal</button><i class="glyphicon glyphicon-flag text-primary"></i> About</a>
                </li>
            </ul>
        </li>
    </ul>
</div>


<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">×</span>
        <p>Some text in the Modal..</p>
    </div>

</div>

<script>
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

</body>
</html>

Answer 1

开放式模式<button>位于锚元素<a>内，这不是有效的HTML5语法：

<a href="<?php echo base_url(''); ?>">
    <button id="myBtn">Open Modal</button><i class="glyphicon glyphicon-flag text-primary"></i> About
</a>

话虽如此，您可以将JavaScript更改为：

// When the user clicks the button, open the modal
btn.onclick = function(e) {
    e.preventDefault();
    modal.style.display = "block";
}

防止锚点上的click事件重定向。但是，更好的方法是完全删除按钮：

<ul class="dropdown-menu dropdown-user">
    <li>
        <a id="myBtn" href="<?php echo base_url(''); ?>"><i class="glyphicon glyphicon-flag text-primary"></i> About</a>
    </li>
</ul>

这是一个实例：
http://www.bootply.com/W8ESbhIkcd

稍微偏离主题，您是否考虑过使用内置的bootstrap模式？ http://getbootstrap.com/javascript/#modals

bootstrap导航栏中的模态

1 个答案: