Как я могу показать всплывающее сообщение при вводе веб-сайта?

Я работаю с продавцом, это ссылка на сайт, я работаю. 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

вы можете вызывать метод document.ready – codebot

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

HTML

<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

еще я борюсь –

Вы можете использовать $(document).ready... как:

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

ИЛИ

Предоставление функции в onLoad свойство тела, которое выполнить JavaScript сразу после страница была загружена:

<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 является встроенный метод JavaScript, то, как известно, есть некоторые причуды в старых браузерах (IE6, IE8, старые версии FF и Opera), но, как правило, работают во всех них.

window.load может использоваться в событии onload такого типа.

Не путайте метод загрузки элемента window с помощью метода загрузки jQuery AJAX !!!

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

Вот образец работал для меня:

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:

<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

это не сработало. –

Это базовый стандарт кодирования javascript [jQuery]. Я оставил этот ответ, надеясь, что вы можете сделать все остальное на нем. Теперь, возможно, вы пропустили что-то для своей цели или назвали его. –

Мне нужно вот так: http://imgur.com/CsomvzF, но вместо того, чтобы подписаться, мне нужно показать только сообщение .. –

Как я могу показать всплывающее сообщение при вводе веб-сайта?

ответ

Смежные вопросы