模态的参考脚本?

时间:2016-06-16 21:48:54

标签: javascript c# asp.net-mvc sharepoint bootstrap-modal

我有主页,我有模态...模态有脚本但它不起作用,我不知道为什么。我把它说成这些

<!--Modal Scripts-->
 <script type="text/javascript">
    $(document).ready(function () {

        FooterPopulate("https://new-public.sharepoint.com", "Footer", "#Footer");
        InterestLinksPopulate("https://new-public.sharepoint.com", "Links", "#Links");
        SiteMapPopulate("https://new-public.sharepoint.com", "Map", "#Map");
        ImgLinksPopulate("https://new-public.sharepoint.com","ImageLink","#ImageLink");


    UnetePopulate("https://new-public.sharepoint.com", "EtiquetasFormularios");

var s = skrollr.init();

s.refresh($('.homeSlide'));

 $('#ctl00').validate({ 
    rules: {
        txtNombreCompleto: {
            required: true,
            maxlength: 50
        },
        exampleInputEmail2: {
            required: true,
            email: true,
            maxlength: 30
        },
        dropOficina: {
            required: true
        },
        txtTelefono: {
            required: true,
            maxlength: 30
        },
        txtMensaje: {
            required: true,
            maxlength: 255
        },
        getFile: {
            required: true
        },
        acceptData: {
            required: true
        }
    },
    messages: {
        txtNombreCompleto: {
            required: "Capture el nombre completo",
            maxlength: jQuery.validator.format("Solo son permitidos {0} caracteres")
        },
          exampleInputEmail2: {
            required: "Capture el correo electrónico",
            email: "Capture un correo electrónico válido",
            maxlength: jQuery.validator.format("Solo son permitidos {0} caracteres")
        },
        dropOficina: {
            required: "Seleccione la oficina a aplicar"
        },
        txtTelefono: {
            required: "Capture el teléfono",
            maxlength: jQuery.validator.format("Solo son permitidos {0} caracteres")
        },
        txtMensaje: {
            required: "Capture el mensaje",
            maxlength: jQuery.validator.format("Solo son permitidos {0} caracteres")
        },
        getFile: {
            required: "Seleccione su C.V."
        },
        acceptData: {
            required: "Acepte el envío de información personal"
        }
    }
});

$body = $("body");

 $(document).on({
ajaxStart: function() { $body.addClass("loading");    },
 ajaxStop: function() { $body.removeClass("loading"); }    
 });

    });

</script>

 </head>

 <body>
 <div id="mymodal" class="fade modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
 <div class="modal-dialog modal-lg">
 <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="window.close()" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <span class="modal-title th2" id="lblModalLabel" name="lblModalLabel">Join Us</span>
            </div>
            <div class="modal-body">

                <img src="/SiteAssets/NV_JoinImage.png" class="img-responsive img-center">

                <hr>
                <div class="form-group">
                    <input type="text" class="form-control" id="txtNombreCompleto" name="txtNombreCompleto" placeholder="Nombre completo">
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">@</div>
                        <input type="email" class="form-control" id="exampleInputEmail2" name="exampleInputEmail2" placeholder="Su correo electrónico">
                    </div>
                </div>
                <div class="form-group">
                    <select class="form-control" id="dropOficina" name="dropOficina">
                        <option value="">Select one</option>
                        <option value="">Mexico</option>
                        <option value="">Ontario</option>
                    </select>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="txtTelefono" name="txtTelefono" placeholder="Teléfono">
                </div>
                <div class="form-group">
                    <textarea rows="5" class="form-control" id="txtMensaje" name="txtMensaje" placeholder="Mensaje"></textarea>
                </div>
                <div class="form-group">
                    <input type="file" class="form-control" id="getFile" name="getFile" value="Seleccione su C.V." placeholder="Seleccione su C.V.">
                </div>
                <div class="form-group">
                    <input type="checkbox" class="form-control" id="acceptData" name="acceptData" value="1" checked>
                    <span id="acceptDataLabel" name="acceptDataLabel">Acepto enviar mi información personal</span>
                </div>
                <div class="form-group">
                    <span id="avisoUnete" name="avisoUnete">Aviso</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.close()" id="btnCerrar">Close</button>
                <button type="button" class="btn btn-primary" onclick="saveUnete()" id="btnEnviar">Send</button>
            </div>
        </div></div>
 </div>

那么,我怎样才能为我的模态获取脚本?,任何帮助都是非常苛刻的

1 个答案:

答案 0 :(得分:0)

好像你正在使用Bootstrap。如果你想向你展示模态,你必须以某种方式触发它,如Bootstrap documentation中所述:

您可以使用按钮

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Launch demo
</button>

或使用JavaScript手动触发

$('#myModal').modal();

请记住,您必须加载我在代码中看不到的jQuery,Bootstrap CSS和Bootstrap JS。