jquery-confirm – javascript

Remark : alert 이나 confirm 이 ios 에서 웹폼에서 중앙정렬이 된다.

jquery-confirm을 사용하여 ios 에서 웹폼에서 중앙정렬이 되는 오류를 수정해 보자.

https://craftpip.github.io/jquery-confirm

iOS 웹폼

jquery-confirm 사용 iOS 웹폼


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery-confirm.js | The multipurpose alert & confirm</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
  
    <link rel="stylesheet"
          href="jquery-confirm/bundled.css">
		  
    <script src="jquery-confirm/bundled.js"></script>
    <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script-->
	
    <link rel="stylesheet"
          type="text/css"
          href="jquery-confirm/jquery-confirm.css"/>
		  
    <script type="text/javascript"
            src="jquery-confirm/jquery-confirm.js"></script>
			
	
</head>
<body data-spy="scroll"
      data-target=".navbar">

	<div class="col-md-3">
		<button class="example-p-2">Confirmation</button>
	</div>

                <script type="text/javascript">

                    // confirmation
                    $('.example-p-2').on('click', function(){
					
			    var mobile = "02222222222";
	                    var email ="dhdfdkfd@adfdfd.co.kr"; 
					
                         $.confirm({
                            title: '',
                            content: '[휴대폰]' + mobile + '<br> [이메일]' + email 
							+ '<br>[탑승객]의 이름,성별 과 생년월일을 정확히 입력하셨는지 확인 해 주시기 바랍니다.'
							+ '<br>예약완료 후 탑승객 이름은 변경 불가능합니다.'
							+ '<br>- 예약과 동시에 결제가 이루어지지 않으면, 예약이 자동으로 취소됩니다.'
							+ '<br>- 할인석 운임은 예약시 할인율과 결제시 할인율에 따라 운임이 달라질 수 있습니다.'
							+ '<br>- 반드시 예약페이지에서 예약번호 확인 부탁드립니다.\n'
							+ '<br>입력하신 내용으로 예약을 진행하시겠습니까?'
							,
                            icon: '',
                            animation: 'scale',
                            closeAnimation: 'zoom',
                            opacity: 0,
                            buttons: {
							    moreButtons: {
                                    text: ' 취 소 ',
									//btnClass: 'btn-blue',
                                    action: function(){
                                       //return false;
                                    }
                                }, 
                                'confirm': {
                                    text: ' 확 인 ',
                                    //btnClass: 'btn-blue',
                                    action: function(){
                                     return true;
                                    }
                                }
                                
                            }
                        });
					});
					
         </script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jquery-confirm.js | The multipurpose alert & confirm</title>

content="width=device-width, initial-scale=1, user-scalable=no">

href="jquery-confirm/bundled.css">

type="text/css"

href="jquery-confirm/jquery-confirm.css"/>

src="jquery-confirm/jquery-confirm.js"></script>

</head>

<body data-spy="scroll"

data-target=".navbar">

<button class="example-p-2">Confirmation</button>

</div>

// confirmation

$('.example-p-2').on('click', function(){

var mobile = "02222222222";

var email ="dhdfdkfd@adfdfd.co.kr";

$.confirm({

title: '',

content: '[휴대폰]' + mobile + '<br> [이메일]' + email

+ '<br>[탑승객]의 이름,성별 과 생년월일을 정확히 입력하셨는지 확인 해 주시기 바랍니다.'

+ '<br>예약완료 후 탑승객 이름은 변경 불가능합니다.'

+ '<br>- 예약과 동시에 결제가 이루어지지 않으면, 예약이 자동으로 취소됩니다.'

+ '<br>- 할인석 운임은 예약시 할인율과 결제시 할인율에 따라 운임이 달라질 수 있습니다.'

+ '<br>- 반드시 예약페이지에서 예약번호 확인 부탁드립니다.\n'

+ '<br>입력하신 내용으로 예약을 진행하시겠습니까?'

icon: '',

animation: 'scale',

closeAnimation: 'zoom',

opacity: 0,

buttons: {

moreButtons: {

text: ' 취 소 ',

//btnClass: 'btn-blue',

action: function(){

//return false;

}

'confirm': {

text: ' 확 인 ',

//btnClass: 'btn-blue',

action: function(){

return true;

}

});

</script>

</body>

</html>