Question

我是Wouter Sanders，我是一名学习编码员。

对于我正在进行的项目，我必须创建一个RAL颜色选择器，但是我把它放在一个菜单或一个按钮中的位置，所以它还没有开始该页面，如果您不想要它。这是代码所在的网站，因此您可以预览我正在谈论的内容：http://topverf.jtshops.nl/ralcodes.html/?___store=default#
这是我的代码。要小心一点（我不能发布所有代码，因为它很多，但它基本上都是相同的）
`

<div class="fancybox-wrap fancybox-desktop fancybox-type-inline fancybox-opened" tabindex="-1" style="width: 645px; height: auto; position: absolute; top: 20px; left: 310px; opacity: 1; overflow: visible;"><div class="fancybox-skin" style="padding: 15px; width: auto; height: auto;"><div class="fancybox-outer"><div class="fancybox-inner" style="overflow: auto; width: 615px; height: 581px;"><div id="raloption-colorpicker" style="display: block;">
        <p class="disclaimer">
           Let op! De kleuren kunnen er een beetje anders uitzien dan op het voorbeeld </p>
        <ul>
                        <li>
                                                                                                                                <div class="box" style="background-color: #d6c794; color: #000000" onclick="setRalOption('1000','D6C794','0');return false;">
                    <a href="#" style="color:inherit;">RAL1000</a>
                                        <br><span class="color">D6C794</span>
                </div>
            </li>
                        <li>
                                                                                                                                <div class="box" style="background-color: #d9ba8c; color: #000000" onclick="setRalOption('1001','D9BA8C','0');return false;">
                    <a href="#" style="color:inherit;">RAL1001</a>
                                        <br><span class="color">D9BA8C</span>
                </div>
            </li>
                        <li>
                                                                                                                                <div class="box" style="background-color: #d6b075; color: #000000" onclick="setRalOption('1002','D6B075','0');return false;">
                    <a href="#" style="color:inherit;">RAL1002</a>
                                        <br><span class="color">D6B075</span>
                </div>
            </li>
                        <li>
                                                                                                                                <div class="box" style="background-color: #fca329; color: #000000" onclick="setRalOption('1003','FCA329','0');return false;">
                    <a href="#" style="color:inherit;">RAL1003</a>
                                        <br><span class="color">FCA329</span>
                </div>
            </li>
                        <li>

    </div></div></div><a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a></div></div>`

提前致谢， Wouter Sanders

Answer 1

没有完整的代码答案，因为它取决于其他要求或更多信息

但是为了给你一个可以找到信息的答案，你应该看一下像jQuery / jQuery UI这样的javascript框架，以获取有关如何打开对话框的信息，并且有你的颜色选择器代码。

或者查看其他颜色选择器的示例，看看它们是如何完成的。

还要记住，如果你需要一个好的颜色选择器，你可以使用许多其他的采样器。

Answer 2

确定你遇到了什么问题真的很难，所以我试了一下。因为我认为你只是想指出正确的方向。而且因为我有一个非常美好的一天，我用一个真正的基本代码为你设置一个jsFiddle，所以你可以小提琴＆＃34;和它一起，让你开始。

小提琴在这里（点击按钮＆＃34; colorpicker＆＃34;在结果屏幕中）：http://jsfiddle.net/veritas87/EwVyS/

我所做的是，将颜色选择器包裹在＆＃34; DIV＆＃34;我设置为显示的元素：CSS中没有。有了一点jQuery，我点击按钮就可以了，它会在包裹你的颜色选择器的div上切换幻灯片动画。

$('#showColor').on('click', function(){
      $('div.colorWrap').slideToggle(); 
    });

希望这能帮到你！

额外的jsFiddle：http://jsfiddle.net/veritas87/EwVyS/1/

将代码放在下拉菜单或按钮中

2 个答案: