How can I reduce the width of this modal input form and make it more opaque?

See more:

CSS

HTML

bootstrap

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>

...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.