电子：模态和自定义菜单栏的问题
[英]Electron: Problems with Modal and Custom Menu Bar
问题描述
I am working with electron to produce an app but my menu bar doesn't seem to work. 
我正在用电子制作一个应用程序，但是菜单栏似乎不起作用。 I have applied some CSS on it to produce the desired output. 我在上面应用了一些CSS以产生所需的输出。 I checked the thing on other HTML outside Electron and it seemed to work. 我检查了Electron以外的其他HTML上的内容，它似乎可以正常工作。
If anybody can look into my code and say what's wrong.. The thins is that I have the navigation bar set up. 如果有人可以查看我的代码并说出问题所在。那么，我要设置导航栏。 When the user hovers upon the innermost anchor tags, the font-weight should be bold. 当用户将鼠标悬停在最里面的锚标记上时，字体粗细应为粗体。 However, that doesn't seem to work. 但是，这似乎不起作用。
And also, the other thing is that the anchors are linked to some modals but those don't seem to work as well. 而且，另一件事是，锚点链接到某些模式，但这些模式似乎也不起作用。 The whole nav-bar works perfectly outside of electron though. 整个导航栏在电子之外也能完美工作。
I know it might be a little hectic to look at so much of code... But if someone could help me out. 我知道看这么多代码可能有点忙...但是如果有人可以帮助我。 I am going to paste the HTML with over here and I will be linking the CSS 我将在此处粘贴HTML，然后将链接CSS
So the two files of concern are mainWindow.html and dock.css 因此，需要关注的两个文件是mainWindow.html和dock.css
mainWindow.html : mainWindow.html ：
<nav class="navy-main">
<div class="logo">T-Mordern</div>
<ul>
<li>
<a href="#" class="navy-item">File</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a href="#">New File</a>
</li>
<li>
<a href="#">New Project</a>
</li>
<li>
<a href="#">Open File</a>
</li>
<li>
<a href="#">Save</a>
</li>
<li>
<a href="#">Save As</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="navy-item">Edit</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a href="#">Cut</a>
</li>
<li>
<a href="#">Copy</a>
</li>
<li>
<a href="#">Pate</a>
</li>
<li>
<a href="#">Undo</a>
</li>
<li>
<a href="#">Redo</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="navy-item">Settings</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a data-toggle="modal" href="#ThemeSet">Theme Settings</a>
</li>
<li>
<a data-toggle="modal" href="#FontSet">Font Settings</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<span class="close-my">×</span>
<span class="close-my">═</span>
<span class="close-my">−</span>
</nav>
<!--Modals-->
<div class="modal" id="ThemeSet">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Change Theme</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group modal-body">
<p>
<label for="theme" id="text-theme">Please Select Your Theme form here:</label>
<select class="form-control" id="theme">
<option value="pastel-on-dark" selected>Pastel On Dark</option>
<option value="default">Standard</option>
<option value="darcula">Darcula</option>
<option value="cobalt">Cobalt</option>
<option value="solarized">Solarized</option>
<option value="shadowfox">ShadowFox</option>
<option value="seti">Seti</option>
<option value="rubyblue">RubyBlue</option>
<option value="railcasts">RailsCasts</option>
<option value="paraiso-light">Paraiso-Light</option>
<option value="paraiso-dark">Paraiso-Dark</option>
<option value="panda-syntax">Panda Syntax</option>
<option value="oceanic-next">Oceanic Next</option>
<option value="night">Night</option>
<option value="neo">Neo</option>
<option value="neat">Neat</option>
<option value="monokai">Monokai</option>
<option value="midnight">Midnight</option>
<option value="mdn-like">MDN Like</option>
<option value="mbo">MBO</option>
<option value="material">Material</option>
<option value="lucario">Lucario</option>
<option value="liquibyte">Liquibyte</option>
<option value="lesser-dark">Lesser Dark</option>
<option value="isotope">Isotope</option>
<option value="idea">IDEA</option>
<option value="icecoder">IceCoder</option>
<option value="hopscotch">Hopscotch</option>
<option value="gruvbox-dark">Gruvbox Dark</option>
<option value="erlang-dark">Erlang Dark</option>
<option value="elegant">Elegant</option>
<option value="eclipse">Eclipse</option>
<option value="duotone-light">Duotone Light</option>
<option value="duotone-dark">Duotone Dark</option>
<option value="colorforth">ColorForth</option>
<option value="blackboard">BlackBoard</option>
<option value="bespin">Bespin</option>
<option value="base16-light">Base16 Light</option>
<option value="base16-dark">Base16 Dark</option>
<option value="ambiance">Ambiance</option>
<option value="ambiance-mobile">Ambiance Mobile</option>
<option value="abcdef">ABCDEF</option>
<option value="3024-night">3024 Night</option>
<option value="3024-day">3024 Day</option>
<option value="zenburn">Zenburn</option>
<option value="yeti">Yeti</option>
<option value="xq-light">XQ Light</option>
<option value="xq-dark">XQ Dark</option>
<option value="vibrant-ink">Vibrant Ink</option>
<option value="twilight">Twilight</option>
<option value="ttcn">TTCN</option>
<option value="tomorrow-night-eighties">Tomorrow Night Eighties</option>
<option value="tomorrow-night-bright">Tomorrow Night Bright</option>
<option value="the-matrix">The Matrix</option>
<option value="ssms">SSMS</option>
</select>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="save">Save Changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="FontSet">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Change Font Settings: </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group modal-body">
<p>
<p class="lead" id="intext">Change Font-Size: <select class="form-control" id="fontval">
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option selected value="28">28</option>
<option value="32">32</option>
<option value="48">48</option>
<option value="72">72</option>
<option value="96">96</option>
<option value="108">108</option>
</select>
</p>
<hr class="my-4">
<p class="lead" id="intext2">Change Font Face: <select class="form-control" id="fontval2">
<option value="Arial">Arial</option>
<option value="Calibri">Calibri</option>
<option value="Consolas" selected>Consolas</option>
<option value="Courier">Courier</option>
<option value="Lucida Console">Lucida Console</option>
<option value="Segoe UI">Segoe UI</option>
<option value="Times New Roman">Times New Roman</option>
</select>
</p>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="fsave">Save Changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have linked jquery and other required stuff as well. 我也链接了jquery和其他必需的东西。
Here is the link to the CSS file: https://pastebin.com/d5aLqApy 这是CSS文件的链接： https : //pastebin.com/d5aLqApy
And yeah, I am aware that the CSS contains a lot of !important in it... The z-index is there because I have a textarea below the nav bar..... 是的，我知道CSS中包含很多!important ... z-index存在，因为我在导航栏下方有一个textarea。
And here is how the thing should function: https://jsfiddle.net/Sid2018/uthqv36o/1/ 这是它应该如何工作的方式： https : //jsfiddle.net/Sid2018/uthqv36o/1/
2 个解决方案
解决方案1
0 2018-11-09 22:00:07
Have you looked at implementing this natively in the main thread? 您是否考虑过在主线程中本地实现此功能？ Your users may find this more intuitive as well. 您的用户也可能会觉得更直观。
解决方案2
0 已采纳 2018-11-10 14:13:33
It seems to me that the files I had downloaded were in some way not functioning properly. 在我看来，我下载的文件在某种程度上无法正常运行。 Those worked in the browser but not in Electron. 那些是在浏览器中工作的，但不是在Electron中工作的。 But that was fixed when I re-downloaded them.... 但这是在我重新下载它们时解决的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.