我们可以在单页中有两个弹出窗口吗？

Question

 function myFunction() {
   document.getElementById("myDIV1").style.display = "none";
   document.getElementById("myDIV").style.display = "inline";
 }

 function myFunction1() {
   document.getElementById("myDIV1").style.display = "inline";
   document.getElementById("myDIV").style.display = "none";
 }

#myDIV {
  position: fixed;
  top: 40px;
  left: 7px;
  width: 1212px;
  height: 620px;
  display: none;
  z-index: 600;
}
#myDIV1 {
  position: fixed;
  top: 40px;
  left: 7px;
  width: 1212px;
  height: 620px;
  display: none;
  z-index: 600;
}
#shadow {
  background: rgba(202, 188, 160, 0.6);
  position: fixed;
  top: 47px;
  left: 213px;
  width: 801px;
  height: 570px;
  -webkit-box-shadow: 9px 5px 27px 5px rgba(71, 68, 71, 0.57);
  -moz-box-shadow: 9px 5px 27px 5px rgba(71, 68, 71, 0.57);
  box-shadow: 9px 5px 27px 5px rgba(71, 68, 71, 0.57);
}
.privacy-stat {
  background: rgba(254, 254, 254, 0.9);
  position: fixed;
  width: 759px;
  height: 500px;
  overflow: auto;
  top: 75px;
  margin: auto;
  padding: 20px;
  left: 213px;
  border-width: 1px;
  border-style: solid;
  border-bottom-color: #666666;
  border-left-color: #666666;
  border-top-color: #666666;
  border-right-color: #666666;
}
#title-bar {
  background-color: #CCCCCC;
  width: 799px;
  height: 27px;
  position: fixed;
  left: 213px;
  top: 47px;
  border-width: 1px;
  border-style: solid;
  border-bottom: none;
  border-left-color: #666666;
  border-top-color: #666666;
  border-right-color: #666666;
  z-index: 600;
}
#close {
  position: fixed;
  width: 26px;
  height: 26px;
  position: relative;
  left: 769px;
  top: -1px;
}

 <a onClick="myFunction()" href="#" class="button"><span>ADD EMPLOYEE</span></a>
<a onclick="myFunction1()" href="#" class="button"><span>EDIT</span></a>


<div id="myDIV">
  <div id="shadow">
    <div class="privacy-stat">
      <div id="title-bar">
        <div id="close">
          <a href="employee/list"><img src="<?php echo base_url(); ?>assets/img/cancel.svg" height="30" width="30"/></a>
        </div>
      </div>
      <div class="sky-tabs sky-tabs-pos-top-left sky-tabs-response-to-icons">
        <input type="radio" name="sky-tabs" checked="" id="sky-tab1" class="sky-tab-content-1">
        <label for="sky-tab1"><span><span>Contact</span></span>
        </label>

        <input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2">
       
        <ul>
          <li class="sky-tab-content-1">
            <div class="typography">

              style="word-spacing: 1px;font-size:12px;">
              <fieldset>


                <legend>
                  <p>GENERAL</p>
                </legend>


                <div class="inputwrap">
                  <label>Employee id:</label>

                  <input type="text" id="" name="id" value="<?php echo set_value('id'); ?>">
                </div>
                </br>
                <div class="inputwrap">
                  <label>First name:</label>

                  <input type="text" id="" name="emp_first_name" pattern="[a-zA-Z]+" title="enter a valid name only characters are allowed" value="<?php echo set_value('emp_first_name'); ?>">

                </div>
                </br>
                <div class="inputwrap">
                  <label for="inputError">Last name:</label>
                  <input type="text" id="" name="emp_last_name" pattern="[a-zA-Z]+" title="enter a valid name only characters are allowed" value="<?php echo set_value('emp_last_name'); ?>">
                </div>
                </br>
                <div class="inputwrap">
                  <label for="inputError" class="control-label">Email id</label>
                  <input type="text" id="" name="emp_email_id" pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" title="enter a valid email for example sample@sample.com" value="<?php echo set_value('emp_email_id'); ?>">
                </div>
                </br>
                <div class="inputwrap">
                  <label for="inputError">Emergency contact</label>
                  <input type="text" name="emp_emergency_contact" pattern="[0-9]{10}" title="enter valid contact. it must contain 10 digits" value="<?php echo set_value('emp_emergency_contact'); ?>">

                </div>
                </br>
                <div class="inputwrap">
                  <label>Category:</label>
                  <?php echo form_dropdown( 'category', $options_designation, set_value( 'category'), 'class="span2"'); ?>
                </div>
                </br>
                <div id="designation">
                  <?php if($this->uri->segment(2) == 'designation');?>
                  <a href="<?php echo base_url();?>admin/designation" class="button"><span>Add</span></a>

                </div>

                </br>
                <div class="inputwrap">




                  <label>Date of hire</label>

                  <input type="date" name="emp_date_of_hire" value="<?php echo set_value('emp_date_of_hire'); ?>">

                </div>
                </br>
                <div class="inputwrap">
                  <label>Date of termination</label>

                  <input type="date" name="emp_date_of_termination" value="<?php echo set_value('emp_date_of_termination'); ?>">

                </div>
                </br>
                <div class="inputwrap">
                  <label>Date of rehire</label>
                  <input type="date" name="emp_date_of_rehire" value="<?php echo set_value('emp_date_of_rehire'); ?>">
                </div>
                </br>

                <div class="inputwrap">


                  <label>Referenece number</label>

                  <input type="text" name="emp_reference_num" pattern="[0-9]{10}" title="enter valid contact. it must contain 10 digits" value="<?php echo set_value('emp_reference_num'); ?>">


                </div>
                </br>
                <div class="inputwrap">


                  <label>System name</label>

                  <input type="text" name="system_name" value="<?=$system_name ?>">


                </div>
                </br>



                <div class="inputwrap">
                  <button id="btn" type="submit">NOTES</button>
                  <button id="btn" type="submit">SAVE</button>
                  <button id="btn" type="reset">CANCEL</button>
                </div>

              </fieldset>
              <?php echo form_close(); ?>

              </fieldset>
              </FONT>

            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!--For edit-->
  <div id="myDIV1">
    <div id="shadow">
      <div class="privacy-stat">
        <div id="title-bar">
          <div id="close">
            <a href="employee/list"><img src="<?php echo base_url(); ?>assets/img/cancel.svg" height="30" width="30"/></a>
          </div>
        </div>
        <div class="sky-tabs sky-tabs-pos-top-left sky-tabs-response-to-icons">
          <input type="radio" name="sky-tabs" checked="" id="sky-tab1" class="sky-tab-content-1">
          <label for="sky-tab1"><span><span>Contact</span></span>
          </label>



          <ul>
            <li class="sky-tab-content-1">
              <div class="typography">
<p>This my edit page<p>
          </ul>
          </div>
        </div>
      </div>
      <!--Edit end-->

我正在使用codeigniter。在我的视图页面中，我有两个元素添加和编辑。对于像窗口一样的弹出窗口，我使用了元素。对于单按钮动作我可以得到我的结果但是当我有两个按钮它不起作用。有人能解决这个吗？请帮我编码。 我有这个脚本。这里我更改了div元素显示属性。这个div元素仅在单击按钮时出现。

<script>
function myFunction() {
    document.getElementById("myDIV").style.display = "inline";
}
function myFunction1() {
    document.getElementById("myDIV1").style.display = "inline";
}
</script>

这是我的CSS。每个弹出窗口都有myDiv和myDiv1。

#myDIV {


    position: fixed;
    top: 40px;
    left: 7px;
    width: 1212px;
    height: 620px;
    display: none;
    z-index: 600;

}
#myDIV1 {


    position: fixed;
    top: 40px;
    left: 7px;
    width: 1212px;
    height: 620px;
    display: none;
    z-index: 600;

}

我的视图页面。我有两个按钮操作添加和编辑。在这里，我打电话给我的剧本。

<div id="add">

        <a onClick="myFunction()" href="#" class="button"><span>ADD EMPLOYEE</span></a>
        <a onclick="myFunction1()" href="#" class="button"><span>EDIT</span></a>
</div>

这是我的弹出窗口内容。

  <div id="myDIV">
....
    </div>

    <div id="myDIV1">
   .....
    </div> 

添加其他按钮操作时还会干扰第一个弹出窗口结果。

Answer 1

我认为您的问题是当您再次单击ADD EMPLOYEE按钮时，它不会隐藏EDIT弹出窗口并且不会显示myDIV弹出窗口。

要解决此问题，您需要做的是，每次单击其中一个按钮时，首先使用style.display = 'none'隐藏现有弹出窗口。然后显示相关的弹出窗口。

function myFunction() {
  document.getElementById("myDIV1").style.display = "none";
  document.getElementById("myDIV").style.display = "inline";
}

function myFunction1() {
  document.getElementById("myDIV").style.display = "none";
  document.getElementById("myDIV1").style.display = "inline";
}

#myDIV {
  position: fixed;
  top: 40px;
  left: 7px;
  width: 1212px;
  height: 620px;
  display: none;
  z-index: 600;
}
#myDIV1 {
  position: fixed;
  top: 40px;
  left: 7px;
  width: 1212px;
  height: 620px;
  display: none;
  z-index: 600;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV">
  MY DIV
</div>

<div id="myDIV1">
  MY DIV 1
</div>

<div id="add">

  <a onClick="myFunction()" href="#" class="button"><span>ADD EMPLOYEE</span></a>
  <a onclick="myFunction1()" href="#" class="button"><span>EDIT</span></a>
</div>