我试图将这些代码分成单独的文件

Question

i tried this codes in the codeigniter. 我在codeigniter中尝试了这些代码。
This code is running when this all together , But when i separate these, i create a css file and also a js file then give them a link to load the css and js file then this code is not running, how can separate its js and css? 当这一切都在一起时，这个代码正在运行，但是当我将它们分开时，我创建了一个css文件，还有一个js文件，然后给它们一个链接来加载css和js文件然后这个代码没有运行，如何分离它的js和CSS？

To load my css in the codeigniter i write this code 要在codeigniter中加载我的CSS，我写这段代码

<?= link_tag('style.css'); ?>

To load my js file in the codeigniter i write this code 要在codeigniter中加载我的js文件，我编写此代码

 <script type="" src="<?= base_url(''); ?>">


<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>

<img id="myImg" src="<?php echo base_url('assests/img/profile.png');?>" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
</script>

</body>
</html>

Answer 1

this might help you 这可能对你有帮助

<!DOCTYPE html> 
<html lang = "en">

   <head> 
      <meta charset = "utf-8"> 
      <title>CodeIgniter View Example</title> 
      <link rel = "stylesheet" type = "text/css" 
         href = "<?php echo base_url(); ?>css/style.css"> 
      <script type = 'text/javascript' src = "<?php echo base_url(); 
         ?>js/sample.js"></script> 
   </head>

   <body> 
      <a href = 'javascript:test()'>Click Here</a> to execute the javascript function. 
   </body>

</html>

see tut here 看到这里啧啧

Answer 2

Try to put your DOM dependent code within some function and call that function on onload of your document body as follows: 尝试将DOM依赖代码放在某个function并在文档正文的onload上调用该function ，如下所示：

JS Code which need to put in your separate .js file: JS代码需要放在单独的.js文件中：

function myJSFunction(){
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
}

Modify HTML <body> tag as follows: 修改HTML <body>标记，如下所示：

<body onload="myJSFunction()">
   <h2>Image Modal</h2>
    .
    .

Answer 3

try to this 试着这个

<link rel = "stylesheet" type = "text/css" href = "<?php echo base_url('path/style.css'); ?> "> 
<script type = 'text/javascript' src = "<?php echo base_url('path/sample.js'); 
         ?>"></script>

我试图将这些代码分成单独的文件

问题描述

3 个解决方案

解决方案1
0 2016-11-04 10:43:52

解决方案2
0 2016-11-04 10:47:07

解决方案3
0 2016-11-04 10:49:42

我试图将这些代码分成单独的文件

问题描述

3 个解决方案

解决方案1 0 2016-11-04 10:43:52

解决方案2 0 2016-11-04 10:47:07

解决方案3 0 2016-11-04 10:49:42

解决方案1
0 2016-11-04 10:43:52

解决方案2
0 2016-11-04 10:47:07

解决方案3
0 2016-11-04 10:49:42