【问题标题】:How can i show pop up message when entered website?进入网站时如何显示弹出消息?
【发布时间】:2014-12-26 05:38:06
【问题描述】:

我正在与 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 -->

我可以知道,我该怎么做,有什么想法吗?

提前致谢。

【问题讨论】:

  • 可以调用document.ready上的方法

标签: jquery shopify


【解决方案1】:
$(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 -->

【讨论】:

  • 我还在挣扎
【解决方案2】:

您可以使用$(document).ready... 喜欢:

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

为 body 的 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可以像这样在body的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>

【讨论】:

  • 这是javascript[jQuery]的基本编码标准。我留下了这个答案,希望你可以做剩下的事情。现在可能是你为了你的目的或者在命名它时遗漏了一些东西。
  • 我需要这样:imgur.com/CsomvzF 但我不需要订阅,而是只显示消息..
  • 对不起.. 此内容已被阻止。 .. 为了我。自己试一试,不要等别人来做你所有的工作。 -结束
猜你喜欢
  • 1970-01-01
  • 2016-10-19
  • 1970-01-01
  • 2012-05-28
  • 2020-04-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多