微件:配队模拟器

<script>

   var modal = document.getElementById('character-list-modal');
   var content = document.getElementById('character-list-content');
   
   // 如果还没有加载角色列表，则加载
   if (content.children.length === 0) {

content.innerHTML = '

';

       // 角色列表将通过下面的div加载
   }
   
   modal.style.display = 'block';

}

function closeCharacterList() {

   document.getElementById('character-list-modal').style.display = 'none';

}

function selectCharacter(name) {

   var slot = document.getElementById('character-slot');
   var placeholder = document.getElementById('character-placeholder');
   var selected = document.getElementById('character-selected');
   
   // 隐藏占位符
   placeholder.style.display = 'none';
   
   // 显示选中的角色
   selected.innerHTML = '<img src="/images/' + encodeURIComponent('战斗员图鉴_' + name + '.png') + '" width="150" />';
   selected.style.display = 'block';
   
   // 关闭弹窗
   closeCharacterList();
   
   // 移除点击事件，改为右键可以重新选择
   slot.onclick = null;
   slot.oncontextmenu = function(e) {
       e.preventDefault();
       placeholder.style.display = 'flex';
       selected.style.display = 'none';
       selected.innerHTML = ;
       slot.onclick = showCharacterList;
       slot.oncontextmenu = null;
   };

}

// 点击模态框外部关闭 document.addEventListener('click', function(event) {

   var modal = document.getElementById('character-list-modal');
   if (event.target === modal) {
       closeCharacterList();
   }

}); </script>