如何减小此模态输入表单的宽度并使其更加不透明? [英] How can I reduce the width of this modal input form and make it more opaque?

查看:68
本文介绍了如何减小此模态输入表单的宽度并使其更加不透明?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在这里使用了Dino Esposito的文章: Modal ASP.NET MVC中的输入表单 [ ^ ]在模态输入表单上获得良好的开端。



我添加了这个html:



I used Dino Esposito's article here: Modal Input Forms in ASP.NET MVC[^] to get a good start on a modal input form.

I added this html:

<a type="button"

       class="btn"

       href="#add-email"

       name="addlEmails" id="addlEmails"

       data-toggle="modal">Add Another Email</a>





。 ..这个:





...and this:

<div class="modal fade" id="add-email">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>Add New Email Address for current Unit/Report</h3>
        </div>
        <div class="modal-body">
            <p>Cuerpo del Formulario</p>
            <label>Add Email</label><input type="text" name="additionalEmail" id="additionalEmail" />
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary" id="btnSaveEmail" name="btnSaveEmail">Save Email Address</a>
        </div>
    </div>





...有一个伪按钮来打开模态输入表单,以便允许用户输入其他电子邮件地址,如果表单上的电子邮件地址的三个输入文本不是在某些情况下足够了。



问题是表格是透明而且太宽了。



我认为删除淡入淡出类可能会给我我想要的坚实背景,并且自定义halfwidth类会减少模态窗体的宽度,但它会重新调整你根本没有帮助。



我怎样才能将它(水平,宽度,特别是)缩小到更适中的尺寸,并摆脱它的隐形?



我尝试过的事情:



我以为去掉了淡入淡出类可能会给我我想要的坚实背景,并且自定义半宽类会减小模态形式的宽度,但它实际上没有任何帮助。



...to have a "pseudo-button" to open the modal input form so as to allow the user to enter additional email addresses, if the three input texts for email addresses on the form are not enough in some scenarios.

The problem is that the form is "see-through" and way too wide.

I thought removing the "fade" class might give me the solid background I wanted, and that the custom "halfwidth" class would reduce the width of the modal form, but it really didn't help at all.

How can I shrink it (horizontally, width-wise, especially) to a more moderate size, and get rid of its "invisibleness"?

What I have tried:

I thought removing the "fade" class might give me the solid background I wanted, and that the custom "halfwidth" class would reduce the width of the modal form, but it really didn't help at all.

推荐答案

您必须通读CSS(检查开发人员工具中哪些样式会改变表单的不透明度)并更改它。宽度相同。



当您显示模态时,右键单击 - >检查元素,检查应用于表单的CSS以及设置宽度的类。



转到CSS并使用自定义值更改/调整/覆盖它。 />
我会首先检查模态类,因为它是表单中使用的第一个。 Fade可能只是用于结束过渡。



祝你好运!
You will have to read through CSS (check in developers tools which styles change opacity of the form) and change that. Same for width.

When you show the modal, right-click -> Inspect Element, check CSS applied to the form and which class sets the width.

Go to that CSS and change / adjust / override it with your custom values.
I would check modal class first, since it is first one used in the form. Fade is probably just used for closing transition.

Good luck!


这篇关于如何减小此模态输入表单的宽度并使其更加不透明?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆