javascript - 如何将 Javascript 和 CSS 包含到 Bootstrap 灯箱模式对话框中？

Question

我正在使用 bootstrap lightbox 来显示具有特定 CSS 样式和 javascript 代码(用于表单)的表单；但我不知道该怎么做。请帮忙!

我需要这个因为我正在使用 Selectize.JS在输入上制作一些标签

这是我实际拥有的源代码，但它不能正常工作，因为它不能使用主页上包含的 css 和 javascript 文件。

<script>
 var form= ' <div class="col-md-6"> \
    <h4>Indentité</h4> \
        <form role="form"> \
            <div class="form-group"> \
                <input id="nom" type="text" class="form-control" name="dest" placeholder="Nom"> \
            </div> \
            <div class="form-group"> \
                <input id="prenom" type="text" class="form-control" name="dest" placeholder="Prenom"> \
            </div> \
            <div class="form-group"> \
                <input id="surnom" type="text" class="form-control" name="dest" placeholder="Surnom"> \
            </div> \
            <div class="form-group input-group"> \
                <span class="input-group-addon">Pays</span> \
                <select class="form-control" id="select_country" > \
                    <option value="auto" selected="selected">Auto-detect</option> \
                    <option value="AF">Afghanistan</option> \
                    <option value="AL">Albania</option> \
                    <option value="DZ">Algeria</option> \
                    <option value="AS">American Samoa</option> \
                    <option value="AD">Andorra</option> \
                    <option value="AO">Angola</option> \
                    <option value="AI">Anguilla</option> \
                    <option value="AQ">Antarctica</option> \
                    <option value="AG">Antigua And Barbuda</option> \
                    <option value="AR">Argentina</option> \
                    <option value="AM">Armenia</option> \
                    <option value="AW">Aruba</option> \
                    <option value="AU">Australia</option> \
                    <option value="AT">Austria</option> \
                    <option value="AZ">Azerbaijan</option> \
                    <option value="BS">Bahamas</option> \
                    <option value="BH">Bahrain</option> \
                    <option value="ZM">Zambia</option> \
                    <option value="ZW">Zimbabwe</option> \
                </select> \
            </div> \
            <div class="form-group"> \
                <input type="text" id="tags-phone" placeholder="Téléphone"> \
            </div> \
            <div class="form-group"> \
               <select multiple type="text" id="tags-groupe" placeholder="Groupe"> \
                    <option value="Rédacteurs">Rédacteurs</option> \
                    <option value="Correcteurs">Correcteurs</option> \
                    <option value="Inspecteurs">Inspecteurs</option> \
                    <option value="Controleurs">Controleurs</option> \
                    <option value="MembreJeudi">MembreJeudi</option> \
                    <option value="Officiers">Officiers</option> \
                    <option value="Etudiants">Etudiants</option> \
                    <option value="Stagiaires">Stagiaires</option> \
                    <option value="Infographes">Infographes</option> \
                </select> \
            </div> \
            <button type="button" class="btn btn-default btn-block" onclick="processContact();">Enregistrer!</button> \
        </form> \
    </div> ';

  $(document).on("click", ".addnew", function(e) {
            bootbox.alert(form, function() {
                console.log("Alert Callback");
            });
        });

</script>

我用了bootbox.JS以方便模式对话框的使用。

这是表单正常工作所需的 javascript:

<script type="text/javascript" src="js/selectize.min.js"></script>
<script type="text/javascript" src="js/PhoneFormat.js"></script>
<script type="text/javascript">
var phone_number;
var groupe;
function processContact() {

    var Contact  = new Object();
    Contact.nom= $('#nom').val();
    Contact.prenom=  $('#prenom').val();
    Contact.surnom=  $('#surnom').val();
    Contact.phone=  phone_number;
    Contact.groupe= groupe;


    var contactObj = JSON.stringify(Contact);

      alert(contactObj);
    $.post('Controller/Controller.php',
        {
            action: 'add_contact',
            item: contactObj 
        },
        function(data, textStatus) {
            //getUserList(element);
            //$('#indicator').hide();
        }, 
        "json"      
    );

}


var formatName = function(item) {
    return $.trim((item.first_name || '') + ' ' + (item.last_name || ''));
};

function getCountryPrefix(country, phone) {
    var e164 = formatE164(country, phone);
    return formatInternational(country, e164).split(' ',1);
}

$(function() {

     /* Selectize Plugin*/
  $('#tags-groupe').selectize({    
    delimiter: ',',
    persist: false,
    create:false
  });


    $('#tags-phone').selectize({
    persist: true,
    maxItems: 2, 
    createOnBlur: true,
    valueField: 'phone',
    labelField: 'name',
    searchField: ['phone'],
    sortField: [
        {field: 'phone', direction: 'asc'}
    ],
    render: {
        item: function(item, escape) {
            var name = formatName(item);
            var prefix= getCountryPrefix($('#select_country').val(),escape(item.phone));  
            if(escape(item.phone).substring(0, 1) == "+")
                prefix='';
            return '<div>' +
                (name ? '<span class="name">' + escape(name) + '</span>' : '') +
                (item.phone ? '<span class="phone">' + prefix+escape(item.phone) + '</span>' : '') +
            '</div>';
        },
        option: function(item, escape) {

            var name = formatName(item);
            var label = name || item.phone;
            var caption = name ? item.phone : null;  
            var prefix= caption ? getCountryPrefix($('#select_country').val(),escape(caption)) : getCountryPrefix($('#select_country').val(),escape(label));  
            if(escape(caption) != null)
                if(escape(caption).substring(0, 1) == "+")
                    prefix='';
            else
                if(escape(label).substring(0, 1) == "+")
                    prefix='';
            return '<div>' +
                '<span class="tag-label">' + prefix+escape(label) + '</span>' +
                (caption ? '<span class="caption">' + prefix+escape(caption) + '</span>' : '') +
            '</div>';
        }
    },
    create: function(input) {
          var countryCode = $('#select_country').val();
          if(countryCode == 'auto')
             countryCode= countryForE164Number(formatE164("", input));
        if (isValidNumber(input, countryCode)) {
            return {phone: input};
        }
        alert('Numéro de téléphone invalide!');
        return false;
    }

  });  

    /* Populating global variable "phone_number" with selected options */
     $('#tags-phone.selectized').each(function() {
        var $input = $(this);
        var update = function(e) { phone_number= $input.val(); }
        $(this).on('change', update);
        update();   
    }); 

        /* Populating global variable "groupe" with selected options */
     $('#tags-groupe.selectized').each(function() {
        var $input = $(this);
        var update = function(e) { groupe= $input.val(); }
        $(this).on('change', update);
        update();   
    }); 

});
</script>

还有 CSS:

<link rel="stylesheet" type="text/css" media="all" href="css/selectize.css">
<style type="text/css">

.selectize-control {
    width: 100%; 
}
.phone {
    opacity: 0.8;
    margin-left: 5px;
}
.phone:before {
    content: '[';   
}
.phone:after {
    content: ']';
}
.tag-label {
    color: #000000;
}
.caption {
    font-size: 12px;
    display: block;
    color: #a0a0a0;
    margin-left: 10px;
}

.contact-item { 
    font-size: 12px;
    font-weight:150;
}

</style>

Answer 1

您可能希望使用 Bootstrap 框 dialog() 而不是警报 ;)。

Working Demo (fiddle)

像上面那样使用 form 变量，并将函数更改为:

$(function () {
    $(document).on("click", ".addnew", function (e) {
        bootbox.dialog({
            message: form,
            title: "Custom title",
            buttons: {
                main: {
                    label: "Submit!",
                    className: "btn-primary",
                    callback: function () {
                        // do something
                    }
                }
            }
        });
    });
});