웹 사이트에 들어가면 팝업 메시지가 표시됩니다.

나는 shopify와 함께 일하고있다. 이것은 웹 사이트 링크이며, 나는 일하고있다. https://crap-3.myshopify.com/,웹 사이트에 들어가면 팝업 메시지가 표시됩니다.

웹 사이트에 들어 왔을 때 색인 페이지에서 "웹 사이트에 오신 것을 환영합니다"와 같은 팝업 메시지를 표시하십시오.

$('#myModal').on('shown.bs.modal', function() { 
    $('#myInput').focus() 
    }) 




<div class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body&hellip;</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

나는 어떻게 할 수 있습니까?

미리 감사드립니다.

출처

2014-12-26 Anonymous

당신은 아직도 내가 그것을 작동하지 않았다 – codebot

$(document).ready(function(){ 
    $('#myModal').modal('show') 
});

당신은 같은 $(document).ready...을 사용할 수 있습니다

<div class="modal fade" id="myModal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Welcome Message</p> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

출처

2014-12-26 05:53:41

에 메서드를 호출 할 수 있습니다. –

HTML :

$(document).ready(function() 
{ 
    // executes when HTML-Document is loaded and DOM is ready 
    alert("(document).ready was called - document is ready!"); 
});

또는

이 직후 자바 스크립트를 실행하는 신체의 onLoad 속성에 함수를주기 페이지가로드되었습니다 :

<body onload="myFunction()">

window.load 그러나 완전히로드 할 페이지를 기다리는이 포함 내부 프레임, 이미지 등

$(window).load(function() 
{ 
    // executes when complete page is fully loaded, including all frames, objects and images 
    alert("(window).load was called - window is loaded!"); 
});

window.load는 내장 된 자바 스크립트 방법이 몇 가지 단점을 가지고하는 것으로 알려져있다 오래된 브라우저 (IE6, IE8, 오래된 FF 및 Opera 버전)에서는 일반적으로 모두 작동합니다.

window.load 이렇게 신체의 onload 이벤트에 사용할 수 있습니다.

window 요소의로드 메소드를 jQuery AJAX의로드 메소드와 혼동하지 마십시오 !!!

HTML :

<html> 
<head> 
<title> Popup Box DIV </title> 
</head> 
<body> 
<div id="popup_box"> <!-- OUR PopupBox DIV--> 
    <h1>This IS A Cool PopUp</h1> 
    <a id="popupBoxClose">Close</a>  
</div> 
<div id="container"> <!-- Main Page --> 
    <h1>sample</h1> 
</div> 
</body> 
</html>

CSS : 여기

// This is the AJAX load 
$("#MyDivID").load("content_page.txt");

샘플이 나를 위해 일입니다

<style type="text/css"> 
/* popup_box DIV-Styles*/ 
#popup_box { 
    display:none; /* Hide the DIV */ 
    position:fixed; 
    _position:absolute; /* hack for internet explorer 6 */ 
    height:300px; 
    width:600px; 
    background:#FFFFFF; 
    left: 300px; 
    top: 150px; 
    z-index:100; /* Layering (on-top of others), if you have lots of layers: I just maximized, you can change it yourself */ 
    margin-left: 15px; 

    /* additional features, can be omitted */ 
    border:2px solid #ff0000;  
    padding:15px; 
    font-size:15px; 
    -moz-box-shadow: 0 0 5px #ff0000; 
    -webkit-box-shadow: 0 0 5px #ff0000; 
    box-shadow: 0 0 5px #ff0000; 

} 

#container { 
    background: #d2d2d2; /*Sample*/ 
    width:100%; 
    height:100%; 
} 

a{ 
cursor: pointer; 
text-decoration:none; 
} 

/* This is for the positioning of the Close Link */ 
#popupBoxClose { 
    font-size:20px; 
    line-height:15px; 
    right:5px; 
    top:5px; 
    position:absolute; 
    color:#6fa5e2; 
    font-weight:500;  
} 
</style>

JS :

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     // When site loaded, load the Popupbox First 
     loadPopupBox(); 

     $('#popupBoxClose').click(function() {    
      unloadPopupBox(); 
     }); 

     $('#container').click(function() { 
      unloadPopupBox(); 
     }); 

     function unloadPopupBox() { // TO Unload the Popupbox 
      $('#popup_box').fadeOut("slow"); 
      $("#container").css({ // this is just for style   
       "opacity": "1" 
      }); 
     }  

     function loadPopupBox() { // To Load the Popupbox 
      $('#popup_box').fadeIn("slow"); 
      $("#container").css({ // this is just for style 
       "opacity": "0.3" 
      });   
     }   
    }); 
</script>

출처

2014-12-26 05:56:27

고군분투하고 document.ready –

이것은 javascript [jQuery]의 기본 코딩 표준입니다. 나는 당신이 그것에 나머지를 할 수 있기를 희망하면서이 대답을 떠났다. 지금 당신이 당신의 목적을 위해, 또는 그것을 명명 할 때 무언가를 놓친 것일 수 있습니다. –

내가 이런 식으로해야합니다 : http://imgur.com/CsomvzF하지만 구독하는 대신, 그냥 메시지를 표시해야합니다 .. –

웹 사이트에 들어가면 팝업 메시지가 표시됩니다.

답변

관련 문제