help .modal ('show' ') is not a function

Question

help .modal ('show' ') is not a function

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

good I have problems to show a modal modality all this binen but it does not let me call the modal to show it

$('#modal_registrar').modal('show');// asi la estoy llamando pero me marca error
$('#modal_registrar').show(); // si lo pongo asi no marca error pero no muestra nada

my libraries are

<?php $this->load->view('est/estilos'); ?>

          <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet">
        <link href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" type="text/css" rel="stylesheet">
    </head>

to the bottom

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>


<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script src="<?=base_url()?>asse-new/js/va/val.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
    </body>
</html>

in styles I have these libraries

<link rel="stylesheet" href="<?php echo base_url();?>bootstrap/css/bootstrap.min.css">
        <!-- flag icons -->
            <link rel="stylesheet" href="<?php echo base_url();?>img/flags/flags.css">
        <!-- elusive webicons -->
            <link rel="stylesheet" href="<?php echo base_url();?>css/elusive/css/elusive-webfont.css">

    <!-- aditional stylesheets -->
        <!-- fullcalenar -->
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/fullcalendar/fullcalendar.css">
        <!-- main stylesheet -->
            <link rel="stylesheet" href="<?php echo base_url();?>css/style.css">

             <link rel="stylesheet" href="<?php echo base_url();?>css/formbubble.css">
              <link rel="stylesheet" href="<?php echo base_url();?>css/viewmore.css">

        <!-- theme -->
            <link rel="stylesheet" href="<?php echo base_url();?>css/blue.css" id="theme">



           <link rel="stylesheet" href="<?php echo base_url();?>js/lib/datatables/css/bootstrap.dataTables.css">
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/datatables/extras/TableTools/media/css/TableTools.css">

             <!-- jQuery UI theme -->
            <!--<link rel="stylesheet" href="<?php echo base_url();?>js/lib/jqueryUI/css/Aristo/Aristo.css">-->
        <!-- 2col multiselect -->
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/multi-select/css/multi-select.css">
        <!-- enhanced select -->
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/select2/select2.css">
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/select2/select2-bootstrap.css">

 <!-- iCheck -->
            <link href="<?php echo base_url();?>js/lib/iCheck/skins/square/square.css" rel="stylesheet">

              <!-- datepicker -->
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/datepicker/css/datepicker.css">
        <!-- timepicker -->
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/timepicker/css/bootstrap-timepicker.css">
        <!-- colorpicker -->
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/colorpicker/css/colorpicker.css">
               <!-- bootstrap switch -->
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/bootstrap-switch/bootstrapSwitch.css">
 <!-- responsive table -->
            <link rel="stylesheet" href="<?php echo base_url();?>js/lib/footable/css/hagal_footable.css">


    <link rel="stylesheet" href="<?php echo base_url();?>js/lib/files/css/datatables.responsive.css"/>

     <link rel="stylesheet" href="<?php echo base_url();?>js/lib/magnific/magnific-popup.css">

jquery html

asked by Juan Jose 27.10.2018 в 00:36

source

2 answers

Error in Controller when uploading several images at once Call to undefined function mysqli_init ()

score 1 · Answer 1

As I see you need the bootstrap script, add this line in your scripts section.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

You must add it after jquery.

score 0 · Answer 2

Good day, To show a modal with jquery occupies Jquery UI, here you can find more information about the subject

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Effects - Show Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .toggler { width: 500px; height: 200px; }
  #button { padding: .5em 1em; text-decoration: none; }
  #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
  #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = $( "#effectTypes" ).val();
 
      // Most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 50 };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 280, height: 185 } };
      }
 
      // Run the effect
      $( "#effect" ).show( selectedEffect, options, 500, callback );
    };
 
    //callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
      }, 1000 );
    };
 
    // Set effect from select menu value
    $( "#button" ).on( "click", function() {
      runEffect();
    });
 
    $( "#effect" ).hide();
  } );
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Show</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
 
<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fade">Fade</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
</select>
 
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
 
 
</body>
</html>