Question

我在页面的顶部和底部使用相同的模态代码。 两者都正确显示按钮 。

渲染时：

第一个按钮将直接通过，就像提交按钮一样按下，没有等待。
第二个将起作用期待......

如何理解如何让第一个按钮正确行动的任何想法都将受到赞赏。

这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
<link href="/Content/css/bootstrap.min.css" rel="stylesheet">

<script src="/Content/js/jquery-2.2.0.js"></script>
<script src="/Content/js/bootstrap.min.js"></script>
<script src="/bundles/livevalidation.js"></script>
<script src="/Content/bootstrap-confirmation.min.js"></script>

</HEAD>
<body>

<!-- ########### FIRST TIME ############### -->

<form id="normal" action="/dev/clientEntry.do" method="post" name="UpdateClient">
        <input name="cID" type="hidden" value="360" form="normal"  />

<div id="myModal" class="modal fade" role "dialog">
  <div class="modal-dialog ">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
        <span class="close"><button type="button" class="close" data-dismiss="modal">&times;</button></span>
        <center><h2><font color="FF3322">Are you sure?</font></h2></center>
        </div>
        <div class="modal-body">
            <p><font color="994433">
                <center><B><h3>Please Verify your edits!!</h3></b><br>
                <u>Especially the <b>'Add to Balance'</b> field</u>...</center><br><br>
            </font></p>
            <center>        
            <form action="UpdateClient" method="post" name="UpdateClient" style="display: inline;">
                <button type="submit" class="btn btn-danger btn-xs" value="UpdateClient" name="DO_ME" style="display: inline;">SAVE UPDATE</button>
            </form> &nbsp;
            <form action="" method="post" name="" style="display: inline;">
                <button type="button" class="btn btn-info btn-xs" data-dismiss="modal" style="display: inline;">GO BACK</button>
            </form>
            <form action="/dev/Dashboard_Management.do" method="post" name="" style="display: inline;">
                <button type="submit" class="btn btn-link btn-xs" value="" name="do_NoARGS" style="display: inline;"> or 
                    <font color="FF3322">ABORT</font> (to Dashboard) </button>
            </form>
            </center>
        </div>
        <div class="modal-footer">
            <center><h3>Your caution and diligence are appreciated!</h3></center>
        </div>
    </div>
  </div>
</div>

<center>
<button id="myBtn" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" >SAVE EDITS for ID#359</button>
</center>

<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() { modal.style.display = "block"; }
span.onclick = function() { modal.style.display = "none"; }
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
} 
</script>
    <!-- ############ FIRST INSTANCE FINISHED ############## -->
<b>or </b>

<br><button type="submit" value="NewCustomer" name="DO_ME" form="special"> ADD ANOTHER NEW ENTRY </button></center><br>

<h4><span style="display:inline-block; width: 25pt;"></span>
ID : 360
<span style="display:inline-block; width: 25pt;"></span>
<font color="#ff4444"><B>*</B></font>
Company : <font color="#2222ff"><b>SLATE GRANITE<input name="cCompany" id="cCompany" type="hidden" value="SLATE GRANITE" form="normal"  /></b></font></h4>
<span style="display:inline-block; width: 60pt;"></span>Notes:<span style="display:inline-block; width:78pt;"></span><font size="2">Lifetime Account Value: <b>$0.00</b> (spent so far) </font><br>
<span style="display:inline-block; width: 60pt;"></span> <textarea cols="90" rows="10" name="cNotes" form="normal" ></textarea><br>
<span style="display:inline-block; width: 60pt;"></span><font size="2">Client Since: 2016-01-31 19:21:38.403&nbsp;&nbsp;|&nbsp;
  Last Modified: 2016-01-31 19:21:38.403&nbsp;&nbsp;| 
  &nbsp;&nbsp;Available Balance: <b>$0.00</b> as of (2016-01-31 19:21:38.403) </font><br>
<span style="display:inline-block; width: 60pt;"></span><b>Add to Balance</b>: $<input maxlength="12" name="crAmt" size="12" type="text" value="0" form="normal" /> (amount being deposited) <br>

<hr>

<!-- ############ REPEATING ############## -->

<div id="myModal" class="modal fade" role "dialog">
  <div class="modal-dialog ">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
        <span class="close"><button type="button" class="close" data-dismiss="modal">&times;</button></span>
        <center><h2><font color="FF3322">Are you sure?</font></h2></center>
        </div>
        <div class="modal-body">
            <p><font color="994433">
                <center><B><h3>Please Verify your edits!!</h3></b><br>
                <u>Especially the <b>'Add to Balance'</b> field</u>...</center><br><br>
            </font></p>
            <center>         
            <form action="UpdateClient" method="post" name="UpdateClient" style="display: inline;">
                <button type="submit" class="btn btn-danger btn-xs" value="UpdateClient" name="DO_ME" style="display: inline;">SAVE UPDATE</button>
            </form> &nbsp;
            <form action="" method="post" name="" style="display: inline;">
                <button type="button" class="btn btn-info btn-xs" data-dismiss="modal" style="display: inline;">GO BACK</button>
            </form>
            <form action="/dev/Dashboard_Management.do" method="post" name="" style="display: inline;">
                <button type="submit" class="btn btn-link btn-xs" value="" name="do_NoARGS" style="display: inline;"> or 
                    <font color="FF3322">ABORT</font> (to Dashboard) </button>
            </form>
            </center>
        </div>
        <div class="modal-footer">
            <center><h3>Your caution and diligence are appreciated!</h3></center>
        </div>
    </div>
  </div>
</div>

<center>
<button id="myBtn" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" >SAVE EDITS for ID#359</button>
</center>

<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() { modal.style.display = "block"; }
span.onclick = function() { modal.style.display = "none"; }
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
} 
</script>
    <!-- ############ SECOND INSTANCE FINISHED ############## -->

<script src="http://mistic100.github.io/Bootstrap-Confirmation/dist/bootstrap-confirmation2/bootstrap-confirmation.min.js"></script>
<script>
    \$('[data-toggle=confirmation]').confirmation();
    \$('[data-toggle=confirmation-singleton]').confirmation({ singleton:true });
    \$('[data-toggle=confirmation-popout]').confirmation({ popout: true });
</script>

</body>
</html>

Answer 1

你重复了很多代码两次。同时重复元素的id，并重复实际的js-code。这可能会导致某种干扰。

尝试编写函数来实现这一目的而不是重复代码，并且你可能会有更多的运气......

相同的模态在页面上失败，然后在同一页面上工作

1 个答案: