Question

我有一个jsp页面，其中显示了一些基于业务逻辑的内容。

我想要实现的目标：

在加载整个页面后，在屏幕中间（在笔记本电脑/移动设备/标签页上的所有设备上）的屏幕中间显示一个弹出窗口/警报/消息框。那应该使整个背景屏幕变灰。
弹出窗口应该具有关闭或“ X”按钮以关闭。
弹出窗口是4-5个屏幕/内容消息的序列。意思是，一旦弹出窗口显示第一内容，那么该弹出屏幕中应该存在“下一个”或“>”图标。单击它应该进入下一个屏幕或内容。当您到达最后一个内容或屏幕时，您应该可以回滚到第一条消息。

我不确定应该使用哪种语言或语言组合来实现此目的。有什么建议吗？

Answer 1

用html弹出窗口，将其放入id居中的div中，并在加载文档后用javascript显示它，在这里看看，它应该可以工作，但我没有测试过，因此可能需要调整

css

#pop_up
{
   position:absolute;
   top:50%;
   left:50%;
   display: none;
   .....
}
#pop_up_close
{
   position:absolute;
   top:10px;
   right:10px;
   .....
}

html

<div id="pop_up">
   <div id="pop_up_close">...img or something else....</div>
   your pop up
</div>

jQuery

$('document').ready(function(){
     $('#pop_up').css('display','block');

     $( "#pop_up_close" ).click(function() {
        $('#pop_up').css('display','none');
     });
});

Answer 2

Source

$(".open").click(function() {
  if ($('#first_one').is(':visible')) {
    document.getElementById('prev').style.display = 'none';
    document.getElementById('next').style.display = 'inline';

  }
});

$("#next").click(function() {
  var $next = $(".text:visible").hide().next('p');
  $next.length ? $next.show() : $(".text:first").show();
});

$("#prev").click(function() {
  var $next = $(".text:visible").hide().prev('p');
  $next.length ? $next.show() : $(".text:last").show();
});


$("#next").click(function() {
  if ($('#fourth_one').is(':visible')) {
    document.getElementById('next').style.display = 'none';
  }
});

$("#prev").click(function() {
  if ($('#first_one').is(':visible')) {
    document.getElementById('prev').style.display = 'none';
  }

  if ($('#third_one').is(':visible')) {
    document.getElementById('next').style.display = 'inline';
  }
});

$("#next").click(function() {
  document.getElementById('prev').style.display = 'inline';
});


var divClone = $(".text").clone();

$(".open").click(function() {
  $(".text").replaceWith(divClone.clone());
  $('.text').not(":first-child").hide();
});

$(".close").click(function() {
  $(".text").replaceWith(divClone);
});

.open {
  display: block;
  background-color: #333;
  color: #fefefe;
  padding: 10px 6px;
  border: none;
  cursor: pointer;
}

.modal {
  display: none;
}

.modal {
  z-index: 3;
  display: none;
  padding-top: 100px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4)
}

.modal-content {
  margin: auto;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  padding: 0;
  outline: 0;
  width: 600px
}

.close {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.close:hover {
  color: #000;
  background-color: #ccc;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button onclick="document.getElementById('id01').style.display='block'" class="open">Open Modal</button>

<div id="id01" class="modal">
  <div class="modal-content">
    <div class="modal-container" id="modal-container">
      <span onclick="document.getElementById('id01').style.display='none'" class="close">&times;</span>
      <span>Welcome to the modal</span>
      <p class="text" id="first_one">Content 1</p>
      <p class="text" id="second_one" style="display:none">Content 2</p>
      <p class="text" id="third_one" style="display:none">Content 3</p>
      <p class="text" id="fourth_one" style="display:none">Content 4</p>
      <button id="prev">Prev</button>
      <button id="next">Next</button>
    </div>
  </div>
</div>

使用javascript在屏幕中间显示弹出窗口

2 个答案: