如何将Javascript和CSS包含到引导灯箱模态对话框中

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

我需要这个，因为我正在使用select . 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>