Question

我正在使用shopify，这是网站的链接，我正在工作。 https://crap-3.myshopify.com/，

当我们进入网站时，在索引页面中，显示一些弹出消息，如＆＃34;欢迎访问我们的网站＆＃34;。

$('#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 -->

我可以知道，我怎么能这样做，任何想法？

提前致谢。

Answer 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 -->

Answer 2

您可以使用$(document).ready...之类的：

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

OR

为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>

如何在输入网站时显示弹出消息？

2 个答案: