Question

我目前正在尝试使用三个不使用jquery的按钮弹出一个对话框？我知道js只能有两个按钮对话框（确认）。但想知道是否有解决方法？如果有，怎么样？提前谢谢。

Answer 1

您需要使用模态对话框。这可以用vanilla JS创建。我从w3schools（https://www.w3schools.com/howto/howto_css_modals.asp）借用了一些代码 - 几乎所有代码 - 就我的例子而言。他们的示例提供了模态窗口的代码。我已将其修改为有3个按钮并添加了一个＆＃39; onclick＆＃39;触发显示值的警告框的事件处理程序。

<html>

    <head>

        <style>
            /* The Modal (background) */
            .modal {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 1; /* Sit on top */
                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/Box */
            .modal-content {
                background-color: #fefefe;
                margin: 15% auto; /* 15% from the top and centered */
                padding: 20px;
                border: 1px solid #888;
                width: 50%;
                text-align: center;
                 /* Could be more or less, depending on screen size */
            }

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

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

    </head>

    <body>

        <!-- Trigger/Open The Modal -->
        <button id="myBtn">Open Modal</button>

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

          <!-- Modal content -->
          <div class="modal-content">
            <span class="close">&times;</span>
            <p>Click a button...</p>
            <button value=1 class="option_button">Option 1</button>
            <button value=2 class="option_button">Option 2</button>
            <button value=3 class="option_button">Option 3</button>
          </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 on 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>

        <script>
            // Add an 'onclick' handler to alert the value of the button clicked.
            document.querySelectorAll('.option_button').forEach(function (optionButton) {
                optionButton.onclick = function () { window.alert(optionButton.value) }
            });


        </script>



    </body>

</html>

如何在不使用jquery的情况下弹出三个按钮对话框？

1 个答案: