个人中心
gpt4 book ai didi

javascript -
的样式以模拟弹出窗口的行为

转载 作者：太空宇宙 更新时间：2023-11-04 04:00:54 24 4
gpt4 key购买 nike

在我的应用程序中，我有一个标签，我可以在其中加载几个 jsp 文件的内容。我希望在我的 css 文件中为这个标签定义一个样式，以获得与弹出窗口相似的外观。有什么办法可以做到这一点？

更新 1

我的页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>HorarioLivre</title>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>  
    <script>
     $(function() {
            $('a').click(function() {
                $('#result').load($(this).attr('href'));
                return false;
            });
        });
    </script>

  <link rel="stylesheet" href="css/style-main.css">
</head>
<body>
  <header>
    <div class="container">
      <h1><a href="index.html">HorarioLivre</a></h1>
      <nav>
        <ul>
          <li><a href="listagem_evento.html" class="icon evento">Eventos</a></li>
          <li><a href="cadastra_horario.html" class="icon horario">Cadastrar Horarios</a></li>
          <li><a href="listagem_horario.html" class="icon horario">Listar Horarios</a></li>
          <li><a href="listagem_usuario.html" class="icon usuario">Usuarios</a></li>
          <li><a href="#">${usuario.nome}</a>
            <ul>
                <li><a href="usuario_perfil.html" id="perfil" class="icon perfil">Perfil</a></li>
                <li><a href="usuario_config.html" id="settings" class="icon settings">Configura&ccedil;&otilde;es</a></li>
                <li><a href="usuario_logoff.html" id="logout" class="icon logout">Sair</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="result"></div>
</body>
</html>

更新 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>HorarioLivre</title>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="index.js"></script>

    <script>
     $(function() {
            $('a').click(function() {
                $('#content').load($(this).attr('href'));
                return false;
            });
        });
    </script>

  <link rel="stylesheet" href="css/style-main.css">
  <link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
  <header>
    <div class="container">
      <h1><a href="index.html">HorarioLivre</a></h1>
      <nav>
        <ul>
          <li><a href="listagem_evento.html" id="popup" class="icon evento">Eventos</a></li>
          <li><a href="cadastra_horario.html" id="popup" class="icon horario">Cadastrar Horarios</a></li>
          <li><a href="listagem_horario.html" id="popup" class="icon horario">Listar Horarios</a></li>
          <li><a href="listagem_usuario.html" id="popup" class="icon usuario">Usuarios</a></li>
          <li><a href="#">${usuario.nome}</a>
            <ul>
                <li><a href="usuario_perfil.html" id="popup perfil" class="icon perfil">Perfil</a></li>
                <li><a href="usuario_config.html" id="popup settings" class="icon settings">Configura&ccedil;&otilde;es</a></li>
                <li><a href="usuario_logoff.html" id="popup logout" class="icon logout">Sair</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="results">
    <a href="#" id="close">Close</a>
    <div id="content"></div><br />
  </div>
</body>
</html>

更新 3

这是我的 javascript 代码:

$(document).ready(function(){
   setupPopup();

   $('#search').submit(function() {
      $('#content').html('Test data');
      return false;
   });
   return false;
});

function setupPopup() {
   $('#popup').click(function() {
      $('#container').append('<div id="cover">');
      $('#results').fadeIn(500);
      popupPosition();
   });

   $('#close').click(function() {
      $('#results').fadeOut(100);
      $('#cover').remove();
   });

   $(window).bind('resize', popupPosition);
}

function popupPosition() {
   if(!$("#results").is(':visible')){ return; }

   $("#results").css({
      left: ($(window).width() - $('#results').width()) / 2,
      top: ($(window).width() - $('#results').width()) / 7,
      position:'absolute'
   });

   $('#results').draggable();
}

更新 4

在对我的 html 和 javascript 代码进行了许多更改之后，此更新从我的代码中带来了更新的版本。在这个版本中，似乎 webapp 忽略了我的脚本文件 js/index.js 的包含，因为它们都没有运行，当我点击链接时，页面在 brownser 窗口中打开，而不是在弹出窗口。

JSP:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>HorarioLivre</title>

  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="js/index.js"></script>

  <link rel="stylesheet" href="css/style-main.css">
  <link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
  <header>
    <div class="container">
      <h1><a href="#">HorarioLivre</a></h1>
      <nav>
        <ul>
          <li><a href="listagem_evento.html" class="icon evento">Eventos</a></li>
          <li><a href="cadastra_horario.html" class="icon horario">Cadastrar Horarios</a></li>
          <li><a href="listagem_horario.html" class="icon horario">Listar Horarios</a></li>
          <li><a href="listagem_usuario.html" class="icon usuario">Usuarios</a></li>
          <li><a href="#">${usuario.nome}</a>
            <ul>
                <li><a href="usuario_perfil.html" class="icon perfil">Perfil</a></li>
                <li><a href="usuario_config.html" class="icon settings">Configura&ccedil;&otilde;es</a></li>
                <li><a href="usuario_logoff.html" class="icon logout">Sair</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="results">
        <a href="#" id="close">Fechar</a>
        <div id="content"></div> 
  </div>
</body>
</html>

JavaScript:

$(document).ready(function(){
   setupPopup();
});

function setupPopup() {
   $('a').click(function() {
       $('#content').load($(this).attr('href'));
      $('#container').append('<div id="cover">');
      $('#results').fadeIn(500);
      popupPosition();
   });

   $('#close').click(function() {
      $('#results').fadeOut(100);
      $('#cover').remove();
   });

   $(window).bind('resize', popupPosition);
}

function popupPosition() {
   if(!$("#results").is(':visible')){ return; }

   $("#results").css({
      left: ($(window).width() - $('#results').width()) / 2,
      top: ($(window).width() - $('#results').width()) / 7,
      position:'absolute'
   });

   $('#results').draggable();
}

最佳答案

这可能对你有帮助，我用javascript写了一个弹出框

https://github.com/corcorans/rcoffee/tree/master/popup

它根据浏览器窗口的内容和大小处理弹出窗口的大小调整。

$('a').on('click', function() {
   $('#content').load($(this).attr('href'));
   $('#container').append('<div id="cover">');
   $('#results').fadeIn(500);
   popupPosition();

   $('#close').on('click', function() {
      $('#results').fadeOut(100);
      $('#cover').remove();
   });

   $(window).bind('resize', popupPosition);
});

关于javascript - <div> 的样式以模拟弹出窗口的行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22083192/

24 4 0
文章推荐： php - 使用 CENTOS 在 PHP 上运行终端命令
文章推荐： linux - 在所有启动过程后运行我的应用程序
文章推荐： javascript - 如何更新画笔上多线的标记？
文章推荐： CSS背景以适应多行文本
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com