jquery ui bootstrap은 사용자 정의 style_jquery를 구현합니다.

먼저 사용자 정의 프롬프트 상자의 렌더링을 살펴보세요

알림 일반 프롬프트는 물론 스타일에 맞게 사용자 정의할 수 있습니다

확인 확인 상자에서 콜백 지원

코드 복사 코드는 다음과 같습니다.

//메시지 프롬프트 정보, 콜백(true/false) 콜백 함수
window.shconfirm = 함수(메시지, 콜백)
콜백 함수 매개변수는 true/false입니다

요청요청 사용자 입력창

코드 복사 코드는 다음과 같습니다.

//메시지 프롬프트 정보, 콜백(msg) 콜백 함수(사용자가 입력한 메시지), param: regex 입력 정기 확인, regexmsg 정기 확인 실패 프롬프트
window.shprompt = 함수(메시지, 콜백, 정규식, 정규식)
여기 메시지는 프롬프트 메시지입니다 *
콜백은 콜백 함수 * 반환 매개변수는 사용자가 입력한 값(userinputmsg)
두 매개변수 regex 및 regexmsg는 선택사항이며 사용자 입력을 확인하는 데 사용됩니다. 두 매개변수는 동시에 표시되어야 합니다. 단독으로 사용할 수 없습니다.

다음은 js 구현입니다.

현재 이는 jquery UI와 부트스트랩의 자체 캡슐화를 통합하는 경고 프롬프트입니다.

코드 복사 코드는 다음과 같습니다.

(함수 () {
    var _shconfirm = {};
    var _shprompt = {};
    //闭包初始化;
    $(함수 () {
        $("#dialogalert").dialog({
            모달: 사실,
            autoOpen: 거짓,
            쇼: {
                효과: "맹인",
                지속시간: 500
            },
            숨기기: {
                효과: "폭발",
                지속시간: 500
            },
            버튼: {
                결정: 함수 () {
                    $(this).dialog("닫기");
                }
            }
        });
        $("#dialogconfirm").dialog({
            모달: 사실,
            autoOpen: 거짓,
            쇼: {
                효과: "슬라이드",
                지속시간: 500
            },
            숨기기: {
                효과: "드롭",
                지속시간: 500
            },
            버튼: {
                결정: 함수 () {
                    _shconfirm.shconfirmCallBack(true);
                    $(this).dialog("닫기");
                },
                取消: 함수 () {
                    _shconfirm.shconfirmCallBack(false);
                    $(this).dialog("닫기");
                }
            }
        });
        $("#dialogprompt").dialog({
            모달: 사실,
            autoOpen: 거짓,
            쇼: {
                효과: "맹인",
                지속시간: 500
            },
            숨기기: {
                효과: "퍼프",
                지속시간: 500
            },
            버튼: {
                결정: 함수 () {
                    if (_shprompt.shpromptObj.regex) {
                        if (!_shprompt.shpromptObj.regex.test($("#dialogprompt .text").val())) {
                            $("#dialogprompt .alert .promptmsg").html(_shprompt.shpromptObj.regexmsg);
                            $("#dialogprompt .alert").slideDown();
                            반품;
                        } 그 밖의 {
                            $("#dialogprompt .alert").hide();
                        }
                    }
                    _shprompt.shpromptObj.callback($("#dialogprompt .text").val());
                    $(this).dialog("닫기");
                },
                取消: 함수 () {
                    _shprompt.shpromptObj.callback($("#dialogprompt .text").val());
                    $(this).dialog("닫기");
                }
            }
        });
    });
    window.shalert = 함수(메시지) {
        $("#dialogalert .msgcontent").html(메시지);
        $("#dialogalert").dialog("열기");
    };
    //메시지 提示的信息,콜백(true/false)回调函数
    window.shconfirm = 함수(메시지, 콜백) {
        $("#dialogconfirm .msgcontent").html(메시지);
        $("#dialogconfirm").dialog("열기");
        _shconfirm.shconfirmCallBack = 콜백;
    };
    //메시지 提示的信息 ,callback(msg)回调函数（用户输入的消息), param：regex 输入的 正则验证 ，regexmsg 正则验证通过的提示
    window.shprompt = 함수(메시지, 콜백, 정규식, 정규식) {
        $("#dialogprompt .msgcontent").html(메시지);
        $("#dialogprompt").dialog("열기");
        _shprompt.shpromptObj = {
            콜백: 콜백,
            정규식: 정규식,
            정규식: 정규식
        };
    }
})();

다음은 호출 코드입니다

confirm //안타깝게도 js는 js 스크립트 일시 중지를 시뮬레이션할 수 없으므로 콜백 함수만 사용하여 다음 단계를 계속할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 ShConfirm() {
               shconfirm("이 작업을 수행하시겠습니까?", 함수(결과) {
                     if (결과) {
Alert("확인을 클릭했습니다.");
                    } else {
Alert("취소를 클릭했습니다.");
                }
            });
}

함수 ShPrompt() {
                 shprompt("1 1은 무엇입니까?", 함수(텍스트) {
Alert("사용자가 입력한 내용: " text);
                }, /^d{1,}$/, "숫자를 입력하세요!");
}

그냥 shalert를 직접 사용해 보세요. js 경고와 동일한 효과가 있습니다.

코드 복사 코드는 다음과 같습니다.

바이두 넷디스크에 소스코드를 올렸습니다. 누구나 배우고 교류할 수 있습니다.

소스코드 다운로드 주소

http://pan.baidu.com/s/1c00Cl36

이 컨트롤에는 실제로 초기화 방법 등 재구성 가능한 부분이 있습니다. 작업이 빡빡해서 먼저 이렇게 사용하겠습니다.

이러한 문제는 다음 최적화에서 해결될 예정입니다.

원래 스타일은 이렇습니다. 참조된 CSS를 수정하면 얻을 수 있습니다. 데모에 자세한 지침이 있습니다.

위 내용이 이 글의 전체 내용입니다. 많은 도움이 되실 겁니다.