从弹出窗口提交表单后如何显示div?

时间:2019-02-06 15:13:43

标签: javascript html

当我在弹出窗口中单击表单上的按钮(类型=“ submit” id =“ log”)时,我想显示(“阻止”)div(id =“ myWrapperMain”),但此div已显示仅持续1秒钟,之后消失了。我必须在代码中添加些什么才能使div在页面中保持打开状态?

感谢任何人的帮助,如何给我任何答复。 巴西亚

<!-- language-all: lang-html -->
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn" style="display:block">Run workflow  from Pronghorn</button>

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
        <form id="modal-wrapper" action="/os_copy/authentification.php">
            <input type="text" size="15" placeholder="user" name="user" />
            <input type="password" size="15" placeholder="pwd" name="pwd" />
            <button type="submit" id="log" name="logSub" value="submit"> Login </button>
        </form>
  </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>

<div class="main-wrapper" id="myWrapperMain" style="display:none">
    <h1>Table 1</h1>
        <div class="table-wrapper" >
            <table class="demo-table" >
            <caption class="title">Executing workflow</caption>
            <thead>
                <tr>
                    <th>WORKFLOW </th>
                    <th>DEVICE NAME </th>
                    <th>FILE NAME </th> 
                    <th>SIZE </th>  
                    <th>URL </th>
                    <th>CLEANNING </th> 
                </tr>
            </thead>
            </table>
        </div>
</div>
<script>
var wrapperMain  = document.getElementById('myWrapperMain');
var btnLog       = document.getElementById("log");
var btnAuth      = document.getElementById("myBtn");
btnLog.onclick   = function() {
    btnAuth.style.display = "none";
    wrapperMain.style.display = "block";
}

</script>

</body>

0 个答案:

没有答案