Question

我想要打开相同的弹出窗口不同的按钮，该按钮实际上与顶部相同。我希望用SQL作为其他行连接。

请帮我找一下这个页面工作的解决方案。

我已经为弹出和减去数量添加了一些数字。

<html>
    <body>
        <div>
            <ul>
                <li class="item" id="snackList<?=$order['productid'] ?>">
                    <div class="picture"><img src="<?=$temp_imageurl ?>"></div>
                    <div class="producttitle"><?=$temp_producttitle ?> </div>
                    <div class="orderquantity"><?=$qty ?></div>
                    <div class="action" onclick="myFunction()">
                        <button id="myBtn" style="width:120px;height:45px;font-size : 20px;;" > Complete</button>
                    </div>
                </li>
                <?php }}}?>
            </ul>
        </div>
        <!-- The Modal -->
        <div id="myModal" class="modal"> 
        <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span> <br>
                <center>
                    Quantity: <input class="quan"type="number" name="quantity"><br><br><button style="width:100px;height:40px;">Submit</button>
                </center>
            </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

您可以使用JQuery UI。在头标记中添加这4行

sap.ui.define([
  'jquery.sap.global',
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
  "use strict";

  var oController = Controller.extend("myView.Template", {
    onInit: function(oEvent) {
      this.getView().setModel(new JSONModel([
        { name : "John", "company": "apple inc", selected: true, bonus: "100%" },
        { name : "Mary", "company": "abc inc", selected: true, bonus: "100%" },
      ]));
    },
    inputChanged: function(oEvent) {
      var cxt = oEvent.getSource().getBindingContext();
      var obj = cxt.getObject();
      obj.selected = (obj.bonus === '100%');
    },
    checkBoxChanged: function(oEvent) {
      var cxt = oEvent.getSource().getBindingContext();
      var obj = cxt.getObject();
      if (obj.selected) {
        obj.bonus = '100%';
      }
    },
  });

  return oController;
});

var oView = sap.ui.xmlview({
  viewContent: jQuery('#oView').html()
});

oView.placeAt('content');

在JS替换

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">  
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

与

modal.style.display = "block";

打开同一个弹出窗口

1 个答案: